React Lifecycle

1. Mount
2. Update
3. UnMount

Mount

• Dom이 생성되고 웹브라우저상에 나타는 것

1. 컴포넌트 생성
2. constructor
   • 컴포넌트가 새로 생성될 때 마다 호출되는 클래스 생성자 메서드
3. getDerivedStateFromProps
   • props에 있는 값을 state에 동기화 하는 메서드 (componentWill)
4. render
   • UI 렌더링 메서드
5. componentDidMount
   • 컴포넌트가 브라우저에 그려진 후 호출되는 메서드

Update

update가 일어나는 상황

1. props, state가 바뀔때
2. 부모 컴포넌트가 re-render될 때
3. this.forceUpdate로 강제로 렌더링 트리거 할때

순서

1. getDerivedStateFromProps
2. shouldComponentUpdate
   • 컴포넌트가 virtual dom을(update를 할지말지) 그릴지 말지 결정한다.
   • false 리턴시 update가 중단된다. (default true)
3. render
4. getSnapshotBeforeUpdate
   • Dom에 반영되기 직전에 호출된다
5. componentDidUpdate

Unmount

1. componentWillUnmount

• 브라우저에서 사라지기 전에 호출된다.

1. render
   • 컴포넌트 모양새 정의
2. constructor
   • 컴포넌트 최초 생성시 호출
   • 초기 state 정의
3. getDerivedStateFromProps (16)
   • props를 state에 동기화 시키는 작업
   • 마운트, props update시

   static getDerivedStateFromProps(nextProps, prevState) {
     if(nextProps.value !== prevState.value) {
       return { value : nextProps.value };
     }
     return null;
   }
   

4. componentDidMount
   • 첫 렌더링은 마친 후 실행된다.
   • 이벤트 등록, 비동기 작업 처리
5. shouldComponentUpdate
   • props, state가 변경됬을 때, 리렌더링 여부를 결정한다.

   shouldComponentUpdate(nextProps, nextState) {...}
   

6. getSnapshotBeforeUpdate (16.3)
   • render 호출 후 dom에 변화를 반영하기 바로 직전에 호출되는 메서드
   • 반환하는 값은 componentDidUpdate에서 세번째 파라미터인 snapshot으로 전달 받을 수 있다.
   • 업데이터 직전 값을 참고할 일이 있을때 사용된다.(ex)스크롤바 위치유지)

   getSnapshotBeforeUpdate(prevProps, prevState) {...}
   

7. componentDidUpdate
   • 리렌더링 완료 후 실행된다.
   • DOM 처리 가능

   componentDidUpdate(prevProps, prevState, snapshot) {...}
   

8. componentWillUnmount
   • 컴포넌트가 제거될 떄 실행된다.
   • componentDidMount에서 등록된 이벤트 제거 등