[React] Lifecycle 이벤트

Lifecycle

Lifecycle 이벤트

React 컴포넌트는 Lifecycle 을 가지고 있으며, 발생한 이벤트에 따라 정해진 순서로 특정 메서드들을 실행합니다. 이벤트에 따라 발생하는 함수의 순서를 알고 있어야 어떤 순서에 어떤 코드를 실행시켜야 할지 판단할 수 있고, 실행 결과를 예측할 수 있습니다.

여기서는 React 16.13.0 버전 이후 Lifecycle 만 설명드리도록 하겠습니다. React 팀에서 Async Rendering 을 위해 Lifecycle 설계를 변경하기로 결정하였으며, 17.0 버전 이후로는 componentWillMount 메서드와 componentWillReceiveProps 메서드, 그리고 componentWillUpdate 함수가 지원되지 않습니다.

Lifecycle 지도

그림 출처

React 컴포넌트의 Lifecycle 이벤트는 아래와 같습니다.

Mounting

React 컴포넌트가 생겨나 DOM 노드에 추가될 때 발생하는 이벤트

1. constructor(props)
2. static getDerivedStateFromProps(props, state)
3. render()
4. componentDidMount()

Updating

새로운 props가 추가되거나, state가 변경되거나, 강제로 업데이트할 때 발생하는 이벤트

1. static getDerivedStateFromProps(props, state)
2. ShouldComponentUpdate(nextProps, nextState)
3. render()
4. getSnapshotBeforeUpdate(prevProps, prevState)
5. componentDidUadate(prevProps, prevState, snapshot)

Unmounting

React 컴포넌트가 DOM 노드에서 제거될 때 발생하는 이벤트

1. componentWillUnmount()

Error Handling

React 컴포넌트를 rendering 하는데 문제가 있을 때 발생하는 이벤트

1. static getDerivedStateFromError(error)
2. componentDidCatch(error, info)