• React 컴포넌트에는 생명주기가 존재합니다.
• 컴포넌트가 실행되거나 업데이트되거나 제거될 때, 특정한 이벤트들이 발생합니다.
• 함수형 컴포넌트에서는 생명주기를 훅을 통해 관리합니다.

Class Component

Mount

컴포넌트가 처음 실행될 때를 Mount된다고 표현합니다. 컴포넌트가 시작되면 우선 context, defaultProps와 state를 저장합니다. 그 후에 componentWillMount 메서드를 호출합니다. 그리고 render로 컴포넌트를 DOM에 부착한 후 Mount가 완료된 후 componentDidMount가 호출됩니다.

주의할 점은, componentWillMount에서는 Mount 중이기 때문에 props나 state를 바꾸면 안됩니다. 그리고 아직 DOM에 render하지 않았기 때문에 DOM에도 접근할 수 없습니다.

componentDidMount에서는 DOM에 접근할 수 있습니다. 그래서 여기에서는 주로 AJAX 요청을 하거나, setTimeout, setInterval같은 행동을 합니다.

정리하면 다음 순서로 실행됩니다.

1. state, context, defaultProps 저장
2. componentWillMount
3. render
4. componentDidMount

Props Update

props가 업데이트될 때의 과정입니다. 업데이트가 되기 전에 업데이트가 발생하였음을 감지하고, componentWillReceiveProps 메서드가 호출됩니다. 그 후 shouldComponentUpdate, componentWillUpdate가 차레대로 호출된 후, 업데이트가 완료(render)되면 componentDidUpdate가 됩니다. 이 메서드들은 첫 번째 인자로 바뀔 props에 대한 정보를 가지고 있습니다.

shouldcomponentUpdate에서는 아직 render하기 전이기 때문에 return false를 하면 render를 취소할 수 있습니다. 주로 여기서 성능 최적화를 합니다. 쓸데없는 update가 일어나면 여기서 걸러내는 것입니다.

여기서 주의사항은 componentWillUpdate에서는 state를 바꿔서는 안 됩니다. 아직 props도 업데이트하지 않았으므로 state를 바꾸면 또 shouldComponentUpdate가 발생합니다.