React class component 라이프사이클 함수 호출순서

1. 컴포넌트가 생성될 때 : 

    1️⃣ constructor

    2️⃣ getDerivedStateFromProps

    3️⃣ render

    4️⃣ componentDidMount

2. 컴포넌트의 Props가 변경될 때:

    1️⃣ getDerivedStateFromProps

    2️⃣ shouldComponentUpdate

    3️⃣ render

    4️⃣ getSnapshotBeforeUpdate

    5️⃣ componentDidUpdate

3. 컴포넌트의 State가 변경될 때:

    1️⃣ shouldComponentUpdate

    2️⃣ render

    3️⃣ getSnapshotBeforeUpdate

    4️⃣ componentDidUpdate

4. 컴포넌트의 렌더링 중 에러가 발생할 때:

    1️⃣ componentDidCatch

5. 컴포넌트가 화면에서 제거될 때:

    1️⃣ componentWillUnmount

 

클래스 컴포넌트에서 이 라이프사이클 함수를 잘 활용하면, 좀 더 최적화된 컴포넌트를 만들 수 있으나 반대로 잘못 사용하면, 컴포넌트가 의도치 않은 동작을 하거나 성능이 나빠질 수 있다.

 

하지만....... 요즘은 클래스 컴포넌트가 아니라 함수 컴포넌트를 쓰기 때문에 클래스 컴포넌트를 접해볼 경우 써봅시다.