리액트 라이프싸이클

라이프싸이클을 보자마자. 안드로이드 라이프싸이클이 생각나는 것은 왜일까....

위 메서드를 작성 후 실행하면 

 

실행순서는 Constructor → getDerivedStateFromProps → render → componentDidMount 

순으로 실행된다.

 

업데이트시에는 

getDerivedStateFromProps → shouldComponentUpdate → render → getSnapshotBeforeUpdate → componentDidUpdate

순으로 실행된다

 

각 메서드들의 용도.

 

1. Constructor  : 초기 State를 정할 수 있다. 

2. getDerivedStateFromProps  : props로 받아온 값을 state에 동기화시키는 용도

3. render  : 컴포넌트들을 화면에 뿌려주는 용도. 

4. componentDidMount : 첫 랜더링 다 마친 후 실행. 라이브러리, 프레임워크 함수 호출, 이벤트 등록,

                                    비동기작업 처리할때 사용.

5. shouldComponentUpdate  : 컴포넌트 업데이트 해야할지말지 정하는 메서드. false면 리랜더링안함.

6. getSnapshotBeforeUpdate : DOM의 변화를 반영하기 직전에 호출하는 메서드임. 업데이트 직전의 값 참고시

                                          활용(스크롤바 위치등)

7. componentDidUpdate : 리랜더링 완료 후 실행. 그 후에 실행될 만한 거 여기다 작성하면 됨.

8. componentWillUnmount : 컴포넌트를 돔에서 제거할때 실행.

                                       componentDidMount에서 등록한 이벤트, 타이머, 직접 생성한 DOM은 여기서 제거.

 

 

그래서 클래스 기준으로 라이프사이클의 흐름은 대략 이렇다.

constructor -> render -> ref -> componentDidMount ->

(setState/props 바뀔때 -> shouldComponent -> render -> componentDidUpdate)

부모가 자식컴포넌트 없앨때 -> componentWillUnmount -> 소멸