[React] 리액트 라이프사이클 (lifecycle)

<라이프사이클>

그러다 보니까 각각의 컴포넌트에는 lifecycle 즉, 컴포넌트의 수명 주기가 존재.

👉 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝남.


라이프사이클은 크게 3가지 유형으로 나눌 수 있음.

1. 생성될 때 (mount)
2. 업데이트 할 때 (update)
3. 제거할 때 (unmount)

📌업데이트는 아래의 상황에서 발생
1. props가 바뀔 때 
2. state가 바뀔 때 
3. 부모 컴포넌트가 리렌더링 될 때 
4. this.forceUpdate로 강제로 렌더링을 트리거 할 때 

<라이프사이클 메서드>

💟 mount 될 때

- constructor

• 말 그대로 생성자임.
• 컴포넌트를 만들 때 처음으로 실행되는데, 이 메서드에서는 초기 state를 정할 수 있음.
  (hooks에서는 useState hook을 이용하면 초기상태 설정 쉽게 가능)

- getDerivedStateFromProps

• props로 받아온 것을 state에 넣어주고 싶을 때 사용
• 이 메서드에서 특정 객체 반환 시, 해당 객체 안에 있는 내용들이 컴포넌트의 state로 설정됨. (state를 갱신하기 위해 객체 반환)
• null을 반환하게 되면 아무것도 갱신하지 않음.
• 컴포넌트가 처음 렌더링 되기 전에도 호출되고, 그 이후 리렌더링 되기 전에도 매번 실행됨.

- render

• 가장 기초적이며 중요한 메서드
• 컴포넌트를 렌더링할 때 필요한 메서드로, 유일한 필수 메서드이기도 하다.
• 함수형 컴포넌트에서는 render를 사용하지 않고 컴포넌트를 렌더링 할 수 있다.

ex)

render () { // 클래스형
  return <div>컴포넌트</div>;
}

return <div>컴포넌트</div>; // 함수형

- componentDidMount

• 컴포넌트의 첫번째 렌더링이 마치고 나면 호출되는 메서드
• 이 메서드가 호출되는 시점에는 우리가 만든 컴포넌트가 화면에 나타난 상태임.

여기선 보통 DOM을 사용해야 하는 외부 라이브러리 연동을 하거나, 
해당 컴포넌트에서 필요로 하는 데이터를 요청하기 위해 axios, fetch 등을 통하여
ajax 요청을 하거나, DOM의 속성을 읽거나 직접 변경하는 작업을 진행함.

• 함수형 hooks에서는 useEffect의 의존성 배열([])을 비우면 이 메서드와 똑같은 기능 구현 가능
  
  
  

💟 update 될 때

- getDerivedStateFromProps

• mount에서 언급했듯, 이 메서드는 마운트 될 때 뿐만 아니라, 컴포넌트의 props나 state가 바뀌었을 때도 호출 !

- shouldComponentUpdate

• props나 state를 변경했을 때, 컴포넌트가 리렌더링 할지 말지 결정하는 메서드.
• 이 친구는 성능 최적화를 위한 것이므로, 렌더링을 방지하는 목적으로 사용하게 된다면 버그로 이어질 수 있음.
  (hooks에서의 React.memo 역할과 비슷하다고 이해하면 됨.)

❓React.memo란 ?
- 컴포넌트의 props 가 바뀌지 않았다면, 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화를 
해줄 수 있는 함수
-이 함수를 사용한다면, 컴포넌트에서 리렌더링이 필요한 상황에서만 리렌더링을 하도록 설정 가능.

+ 렌더링 최적화 하지 않을 컴포넌트에 React.memo 를 사용하는것은, 
불필요한 props 비교만 하는 것이기 때문에 실제로 렌더링을 방지할수있는 상황이 있는 경우에만 사용

- render

• 이 친구 또한 업데이트 할 때도 호출 됨.

- getSnapshotBeforeUpdate

• 얘는 render에서 만들어진 결과가 브라우저에 실제로 반영되기 직전에 호출됨.
• 컴포넌트에 변화가 일어나기 직전의 DOM 상태를 가져와서 특정 값을 반환하면 그 다음 발생하게 되는 componentDidUpdate 함수에서 받아와서 사용할 수 있음.
• 예를 들어, 새로운 내용이 추가되었을 때 사용자의 스크롤 위치를 유지할 수 있도록 할 수 있음.

- componentDidUpdate

• 이 메서드는 리렌더링이 마친 후, 화면에 우리가 원하는 변화가 모두 반영되고 난 뒤 호출됨.
• 3번재 파라미터로 앞서 설명한 getSnapshotBeforeUpdate에서 반환한 값을 조회할 수 있음.
  
  
  

💟 unmount 될 때

- componentWillUnmount

• 컴포넌트가 화면에서 사라지기 직전에 호출됨.
• 주로 DOM에 직접 등록했었던 이벤트를 제거하고, 만약에 setTimeout을 걸은 것이 있다면, clearTimeout을 통해 제거함.
• 추가적으로, 외부 라이브러리를 사용한 게 있고, 해당 라이브러리에 dispose 기능이 있다면 여기서 호출하면 됨.

❓clearTimeout은 언제 사용될까 ?
- setTimeout 사용 후 종료하고 싶은 시점에 사용.
- 재귀로 setTimeout을 사용해서 무한반복시켰을 때, 원하는 시점에 clearTimeout()으로 
재귀를 종료시킬 수 있음.

참고 사이트

State and Lifecycle
LifeCycle Method
React.memo를 사용한 컴포넌트 리렌더링 방지