React Component Lifecycle

• React Component는 탄생부터 죽음까지 여러 지점에서 개발자가 작업이 가능하도록 method를 overriding 할 수 있게 해줌

1. 최초 출력: Initialization(생성자) & Mounting(최초 render)

• constructor -> componentWillMount -> render -> componentDidMount

2. props, state 변경: Updation

• componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate
  1) componentWillReceiveProps: props나 state 둘 중 하나만 변경되어도 newProps와 newState를 인자로 호출됨
  • return type은 boolean으로 true면 render 호출, false면 render 호출X
  • 구현하지 않으면 default는 true
    2) componentWillUpdate: 컴포넌트 재 랜더링 직전에 호출됨
  • setState 등 호출 불가능
    3) componentDidUpdate: 컴포넌트가 재 랜더링 마치면 호출됨

3. Unmounting

• componentWillUnmount

4. 16.3 이후 최신버전

(진한 글씨가 변경된 부분)

• constructor –> getDerivedStateFromProps –> render –> componentDidMount
• getDerivedStateFromProps –> shouldComponentUpdate –> render –> getSnapshotBeforeUpdate –> componentDidUpdate
• componentWillUnmount

+) componentDidCatch: 문제 발생 시 화면 멈추지 않고 err 페이지 출력 가능