생명 주기(Life Cycle)

- 생명 주기 (Life Cycle) : React는 Component 기반의 View를 중심으로 한 Library이다. 그러다 보니 각각의 Component에는 생명 주기가 존재한다. Component의 수명은 보통 Page에서 Rendering 되기 전인 준비 과정에서 시작하여 Page에서 사라질 때 끝이 난다.

 

 

- 생명 주기 (Life Cycle) 유형 : 생성될 때(Mount), 업데이트할 때(Update), 제거할 때(Unmount) 총 3개로 나뉜다.

  - Mount : DOM이 생성되고 웹 브라우저 상에서 나타나는 것

  - Update : 뜻 그대로 DOM이 업데이트 되는 경우인데, 아래와 같은 상황에서 발생.

    1) props가 바뀔 때

    2) state가 바뀔 때

    3) 상위 Component가 Re-Rendering 될 때

    4) this.forceUpdate로 강제로 Rendering 신호를 보낼 때

  - Unmount : Component가 DOM에서 제거되는 것

 

 

- 생명 주기 (Life Cycle) Method 종류 : 생명 주기 Method는 위 그림을 포함하여 9가지가 존재한다.

 

1) constructor : 생성자로 Component를 만들 때 처음 실행된다. 이 Method에서 초기 state를 정할 수 있다.

 

2) getDerivedStateFromProps : props로 받아 온 값을 state에 동기화시키는 용도로 사용하며, Component가 생성될 때와 업데이트될 때 호출된다.

 

3) shouldComponentUpdate : props나 state를 변경했을 때, Re-Rendering을 할지 말지 결정하는 Method이다.

이 Method에서는 반드시 true나 false를 반환해야 한다. 이 Method는 오직 성능 최적화만을 위한 것이며 Rendering 목적을 방지하는 목적으로 사용하게 된다면 버그로 이어질 수 있다.

 

4) render : 가장 기초적이면서 가장 중요한 Method이다. Component를 Rendering 할 때 필요한 Method이다.

함수형 Component에서는 render를 사용하지 않고 Component를 Rendering 할 수 있다.

 

5) getSnapshotBeforeUpdate : 이 Method는 render에서 만들어진 결과를 브라우저에 실제로 반영되기 직전에 호출된다. 주로 업데이트하기 직전의 값을 참고할 일이 있을 때 사용한다.

 

6) componentDidMount : 첫 Rendering을 마친 후 실행한다. 함수형 Hooks로는 useEffect와 비슷하다.

 

7) componentDidUpdate : Re-Rendering이 완료한 후 실행한다. 업데이트가 끝난 직후이므로, DOM 관련 처리를 해도 무방하다.

 

8) componentWillUnmount : Component를 DOM에서 제거할 때 실행한다. componentDidMount에서 등록한 이벤트가 있다면 여기서 제거 작업을 해야 한다. 함수형 Component에서는 useEffect CleanUp 함수를 통해 해당 Method를 구현할 수 있다.

 

9) componentDidCatch : 위 그림에는 없지만, 이 Method는 Component Rendering 도중에 Error가 발생했을 때, 어플리케이션이 멈추지 않고 오류 UI를 보여줄 수 있게 해 준다.