반응형

<리액트의 컴포넌트 LifeCycle>

 - 이 싸이클을 알아야 컴포넌트를 만들 때 효율적으로 만들 수 있다.



Render 싸이클: componentWillMount( ) -> render( ) -> componentDidMount( )

 - willMount : 사이클이 시작되었음을 확인

 - render: 컴포넌트가 리액트 세계에 '존재'하게 되었음을 확인

 - didMount : 성공적으로 리액트 세계에 컴포넌트가 자리잡았음을 확인


ex) 영화앱을 만든다고 치면,

     will Mount 에서 api에 작업을 요청

     render 에서 데이터 관련 작업 등... 

     각 단계에 맞는 작업을 작성하여 효율적으로 처리한다.


Update 싸이클 : componentWillReceiveProps( ) -> shouldComponentUpdate( ) -> componentWillUpdate( ) -> render( ) -> componentDidUpdate( )

 - componentWillReceiveProps : 컴포넌트가 새로운 props를 받았다는 뜻

 - shouldComponentUpdate : old props, new props를 살펴보고 old와 new가 다르면 '업데이트=true'로 업데이트가 발생하도록 함

 - componentWillUpdate : 업데이트를 직접적으로 하는 단계

 - render : 렌더링 작업

 - componentDidUpdate: 업데이트가 완료되었음을 확인      


ex) component will update 를 수행할 때, 어플리케이션에 '뱅글뱅글 돌아가는 spiner'를 붙혀서, 업데이트중임을 표시할 수 있고,

     업데이트 이 후에는(componentDidUpdate), 돌고있던 spinner를 숨기면 됨

+ Recent posts