LifeCycle - 클래스형 컴포넌트에서의 라이프사이클 이해하기

[학습 목표]
1. 리액트 라이프사이클을 이해할 수 있어요.

1. 생명주기(LifeCycle) 소개

(1) 리액트 생명주기란?

입문 과정에서 설명드렸다시피, 리액트 컴포넌트는 각각 [Mount] → [Update] → [Unmount]의 과정을 거칩니다. 사람처럼 태어나고, 변화하고 죽는 것이죠.

리액트 생명주기(라이프사이클)란, 컴포넌트 중심 라이브러리의 집합체라고 보시면 됩니다. 모든 컴포넌트에는 각각의 생명주기가 존재하고 각 생명주기에 맞는 메서드 들이 있어요.

너무 시간을 쏟지는 말고, 나중에 꼭 필요할 때 다시 찾아서 보시는 것을 추천드려요. 우리는 클래스형 컴포넌트가 아닌 함수형 컴포넌트를 사용합니다

(2) 생명주기

2. Mount

(1) 개요

컴포넌트가 생성될 때를 말해요. 다음 메서드가 있습니다.

constructor()
getDerivedStateFromProps(nextProps, prevState)
render()
componentDidMount()

(2) 각 메서드 소개

1. constructor
   1. 컴포넌트가 맨 처음 만들어 질 때 호출
   2. 생성자
2. getDerivedStateFromProps
   1. 부모 컴포넌트로부터 props를 전달받을 때, state에 값을 일치시키는 역할을 하는 메서드
   2. 마운트 될 때, 업데이트(리렌더링) 될 때도 호출
3. render
   1. 최초 mount가 준비완료 되면 호출되는, 즉 렌더링 하는 메서드
   2. 컴포넌트를 DOM에 마운트하기 위해 사용
4. componentDidMount
   1. 컴포넌트가 브라우저에 표시가 된 후 호출되는 메서드

3. Update

(1) 개요

컴포넌트가 갱신될 때를 말해요. 리렌더링 되는 경우죠. 다음 메서드가 있습니다.

getDerivedStateFromProps(nextProps, prevState)
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

(2) 각 메서드 소개

1. getDerivedStateFromProps
   1. Mount 과정에서도 동일하게 호출되었던 메서드.
   2. 부모 컴포넌트로부터 props를 전달받을 때, state에 값을 일치시키는 역할을 하는 메서드
2. shouldComponentUpdate
   1. 리렌더링 여부 판단(함수 호출 결과 : true / false)
      1. true인 경우 : 리렌더링 진행
      2. false인 경우 : 리렌더링 하지 않음
   2. 함수형 컴포넌트에서 memo, useMemo, useCallback이 역할을 대신한다.
3. render
   1. 변경사항 반영이 다 되어 준비완료 되면 호출되는, 즉 렌더링 하는 메서드
   2. 컴포넌트를 DOM에 마운트하기 위해 사용
4. getSnapshotBeforeUpdate
   1. 컴포넌트에 변화가 일어나기 직전 DOM의 상태를 저장
   2. componentDidUpdate 함수에서 사용하기 위한 스냅샷 형태의 데이터
5. componentDidUpdate
   1. 컴포넌트 업데이트 작업 완료 후 호출

4. Unmount

(1) 개요

컴포넌트가 DOM에서 제거되는 시점을 말해요. 다음 메서드가 있습니다.

componentWillUnmount

(2) 각 메서드 소개

1. componentWillUnmount
   1. 컴포넌트가 사라지기 전 호출되는 메서드
   2. useEffect의 return과 동일