React 클래스 컴포넌트 라이프사이클

react-helmet을 사용하면서 만났던 에러: unsafe_component_lifecycle에 대해 궁금점이 생겨 찾아보았다. 기본으로 돌아가서

📌 컴포넌트의 라이프사이클이란?

생성 → 업데이트 → 제거

컴포넌트가 DOM에 처음 렌더링될 때 "마운팅", "업데이트"되고, 제거될 때 "언마운팅"이라고 한다.

클래스 컴포넌트에서 컴포넌트가 마운트되거나 언마운트될 때 componentDidMount, componentWillUnmount의 라이프사이클 메서드를 사용할 수 있다.

✅ 클래스 컴포넌트는 라이프사이클 메서드를 사용하며 함수 컴포넌트는 Hook 방식으로 작동한다. React에서 Hook은 함수 컴포넌트가 state와 라이프사이클 메서드를 사용할 수 있도록 연결한다.

📌 라이프사이클 메서드는?

✅ 각 구역에서도 render, pre-commit, commit 단계로 나눌 수 있는데, Will은 render, Did는 commit을 의미한다. (그림 참고)

• render 단계: 사이드 이펙트가 없으며, React에 의해 중단 또는 재시작 될 수 있는 단계
• pre-commit 단계: DOM을 읽을 수 있는 단계.
• commit 단계: DOM을 제어하며 사이드 이펙트를 유발할 수 있고 업데이트를 등록할 수 있는 단계.

✏️ 마운트(mount)

Constructor → getDerivedStateFromProps → render → componentDidMount

1. constructor
   • 컴포넌트가 생성될 때 실행한다.
   • 초기 state를 정의할 수 있다.
2. getDerivedStateFromProps
   • 오브젝트 리턴 타입을 갖는다.
   • props를 state에 동기화시킨다.
3. render
   • 필수 메서드이다.
   • 상태변경 등 사이드이펙트를 발생시키면 안된다.
   • 메서드 내에서 this.props와 this.state에 접근이 가능하다.
   • 브라우저의 DOM에 접근해서도 안된다.
4. componentDidMount
   • 컴포넌트가 DOM에 추가 된 후 실행된다.
   • DOM에 접근 및 제어할 수 있다.
   • 네트워크 요청과 같은 비동기 작업을 처리한다.
   • 라이브러리, 메서드, 이벤트 등의 코드를 실행한다.

✏️ 업데이트(update)

컴포넌트가 업데이트되는 몇가지 조건이 있다.

1. props나 state가 변경될 때
2. 부모 컴포넌트가 리렌더링될 때
3. this.forceUpdate로 강제로 트리거될 때

위 업데이트 조건(1~3)에 부합하면 → getDerivedStateFromProps → shouldComponentUpdate → render → getSnapshotBeforeUpdate → componentDidUpdate

위 업데이트 조건(4)에 부합하면 → render → getSnapshotBeforeUpdate → componentDidUpdate

1. getDerivedStateFromProps
   • 마운트 단계와 동일하다.
2. shouldComponentUpdate
   • update가 생기면 리렌더링을 결정한다.
   • 반드시 true || false를 반환해야 한다.
3. getSnapshotBeforeUpdate
   • Virtual DOM이 실제 DOM에 반영되기 직전에 실행된다.
   • 리턴값은 componentDidUpdate에서 세번째 인자로 전달된다.
   • 주로 스크롤바 위치 유지 등과 같이 업데이트하기 직전의 값에 사용한다.
4. render
   • 마운트 단계와 동일하다.
5. componentDidUpdate
   • 마운트 단계와 거의 동일하다.
   • 이전에 가졌던 props, state 데이터에 접근이 가능하다.

✏️ 언마운트(unmount)

componentWillUnmount

언마운트는 컴포넌트가 제거되기 전에 componentWillUnmount만 호출하고 종료된다.

1. componentWillUnmount
   • 컴포넌트를 DOM에서 제거할 때 실행된다.
   • 컴포넌트와 관련된 등록한 이벤트, 타이머, 사용자 정보 등을 정리한다.

✏️ Error

컴포넌트가 렌더링되는 과정에서 런타임 에러가 발생하면 호출되는 콜백함수이다.

1. componentDidCatch
   • 에러 메시지, 두번째 인자는 발생한 에러에 대한 상세정보 객체이다.

---

더 공부해 볼 것

• 사실 UNSAFE 라이프사이클이 궁금해서 복습차 찾아보았는데, 이렇게 생소할수가. 반성중🤦🏻‍♀️ 함수 컴포넌트 생명주기는 어떨까?
• 이참에 기존 클래스 컴포넌트와 함수 컴포넌트를 비교해보고 Hook을 도입했을 때 장점과 Hook을 종류와 규칙을 (많이 어겨본 자로써) 알아보고 싶어졌다...
• 결국 React UNSAFE lifecycle에 대해서는..::TODO::

출처

• state-and-lifecycle | React docs
• react-lifecycle-methods-diagram