React.js v16.x 라이프 사이클에 대해서(기본만.)

최근 면접 질문에서 해당 질문이 있었는데...

React.js 경험이 있으시다고 들었습니다. Lifecycle에 대해서 알려주시겠어요?

듣고 답변하려고 보니; 머릿속에 떠오르는 게 웬걸... v13.x 라이프사이클이 떠오르는 게 아닌가... 멘붕..

아.. constructor 호출 후에 componentWill .. 아니 getDerivedStateFromProps.. 어 그러니까 여기서 또... render가..

하고 답변해서 보기 좋게.. 하하하

경험은 각설하고 왜 물망초에 남기는지는 기억하기 위해서입니다.
기준 : React.js v16.x ( 라이프사이클 순서는 위에서 아래로입니다.)

• Mount 시점(초기 컴포넌트 마운트 과정)

  1. constructor
  2. getDerivedStateFromProps : props와 state를 동기화할 것 찾아서 동기화
  3. render
  4. componentDidMount : 컴포넌트가 모두 마운트 되었으니, 조작할 것 조작.(ajax, DOM 조작 등의 작업 설정)

• Update 시점(Props, State 변화 및 부모 컴포넌트 리 렌더링, 강제 업데이트인 - forceUpdate가 있는데, 이건 거의 쓰질 않아서;)

  1. getDerivedStateFromProps : props와 state를 동기화 할 것 찾아서 동기화
  2. shouldComponentUpdate : 리턴 값을 true, false로 주어 해당 컴포넌트를 리렌더링 할 지 선택할 수 있음. 기본값은 true
  3. render
  4. getSnapshotBeforeUpdate : 컴포넌트가 변경되서 DOM 업데이트가 되기 직전에 된다고 합니다.(이건 사실 제대로 써보질 못해서;;;)
  5. componentDidUpdate : 컴포넌트 업데이트 끝나고 수행.

• Unmount 시점(컴포넌트 마운트 해제)

  1. componentWillUnmount

이렇게 3가지의 스텝으로 나누어져 있는데, 하 이걸 정말 제대로 설명을 못해서 ;ㅅ;...
기본적인 3가지 스텝은 기억해놔야겠습니다.