[React] 리액트를 다루는 기술 - 7장 컴포넌트의 라이프사이클 메서드

책) 리액트를 다루는 기술 - 7장 컴포넌트의 라이프사이클 메서드

컴포넌트의 라이프사이클 메서드

• 모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서
  시작하여 페이지에서 사라질 때 끝남
• 리액트 프로젝트를 진행하다보면 가끔 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야 하거나 컴포넌트를
  업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 불필요한 업데이트를 방지해야 함.
  • 이 때, 컴포넌트의 라이프사이클 메서드를 사용
  • 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있음!
  • 함수형에서는 사용 불가, 그 대신 Hooks 기능을 사용해 비슷한 작업 처리 가능

1 라이프사이클 메서드의 이해

1. 라이프사이클 메서드 종류는 9가지.

2. Will, Did 접두사가 붙은 메서드들?

   • Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드
   • Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드
   • 이 메서드들은 컴포넌트 클래스에서 덮어써 선언함으로 사용 가능.

3. 마운트, 업데이트, 언마운트

   ① 마운트

   1. DOM이 생성되고 웹 브라우저상에서 나타나는 것을 마운트(mount) 라고 함. 이 때 호출되는 메서드는?

      컴포넌트 만들기 → constructor → getDerivedStateFromProps → render → componentDidMount

      • constructor 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성사 메서드
      • getDerivedStateFromProps props에 있는 값을 state에 넣을 때 사용하는 메서드
      • render 우리가 준비한 UI를 렌더링하는 메서드
      • componentDidMount 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드

   ② 업데이트

   1. 컴포넌트는 다음과 같은 총 4가지 경우에 업데이트(update) 함.

      1. props가 바뀔 때
         • 부모 컴포넌트에서 넘겨주는 props가 바뀔 때 컴포넌트에 전달하는 props의 값이 바뀌면 컴포넌트 렌더링이 이루어짐
      2. state가 바뀔 때
         • 컴포넌트 자신이 들고 있는 state가 setState를 통해 업데이트 될 때
      3. 부모 컴포넌트가 리렌더링될 때
         • 자신에게 할당된 props가 바뀌지 않아도, 또는 자신이 들고 있는 state가 바뀌지 않아도,
           부모 컴포넌트가 리렌더링되면 자식 컴포넌트 또한 리렌더링함.
      4. this.forceUpdate로 강제로 렌더링을 트리거 할 때

   2. 컴포넌트를 업데이트 할 때는 다음과 같은 흐름을 가지고 있음.

      업데이트를 발생시키는 요인 → getDerivedStateFromProps →
      shouldComponentUpdate (true 반환 시 render 호출 / false 반환 시 여기서 작업 취소) →
      render (forceUpdate) → getSnapshotBeforeUpdate (웹 브라우저상의 실제 DOM의 변화) →
      componentDidUpdate

      • getDerivedStateFromProps
   • 이 메서드는 마운트 과정에서도 호출되며, 업데이트가 시작하기 전에도 호출됨.
   • props의 변화에 따라 state 값에도 변화를 주고 싶을 때 사용
     • shouldComponentUpdate
   • 컴포넌트가 리렌더링을 해야 할지 말아야 할지를 결정하는 메서드
   • 이 메서드에서는 true 혹은 false 값을 반환해야 하며,
     true를 반환하면 다음 라이프사이클 메서드를 계속 실행.
     false를 반환하면 작업 중지 (컴포넌트가 리렌더링되지 않음)
   • 만약 특정 함수에서 this.forceUpdate() 함수를 호출한다면 이 과정을 생략하고 바로 render 호출
     • render 컴포넌트를 리렌더링함
     • getSnapshotBeforeUpdate 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드
     • componentDidUpdate 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드

   ③ 언마운트

   1. 마운트의 반대 과정, 즉 컴포넌트를 DOM에서 제가하는 것을 언마운트(unmount) 라고 함

      언마운트하기 → componentWillUnmount

      • componentWillUnmount 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드

참고 자료 및 책 링크

• 책 - 리액트를 다루는 기술 (개정판)