React의 LifeCycle

각각의 컴포넌트에는 컴포넌트의 생명 주기가 존재합니다. Mount(탄생) → Update 및 Re-render → Unmmount(죽음)로 프로그램이 실행되고 종료되는 과정을 말합니다. 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이납니다.

(1) Mount

• Mount는 DOM이 생성되고 웹 브라우저 상(화면)에 나타납니다.
  • Mount 할 때는 다음의 메서드들이 차례대로 호출된다.
  • constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드
  • getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용하는 메서드
  • render : 우리가 준비한 UI를 렌더링하는 메서드
  • componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드

(2) Update, Re-render

• Update 및 Re-render는 사용자 화면에 뷰를 다시 새롭게 보여주는 것
  • props, state가 바뀔 때와 부모 컴포넌트가 리렌더링 될 때 다음과 같은 순서로 메서드 호출
  1. props, state 변경과 부모 컴포넌트 리렌더링
  2. getDerivedStateFromProps : 마운트에서도 호출되는 메서드로 props의 변화에 따라 state에도 변화를 주고 싶을 때 사용한다.
  3. shouldComponentUpdate : 컴포넌트가 리렌더링을 할지 말지 결정한다. true, false를 반환해야 하며 false를 반환할 시 컴포넌트가 리렌더링 되지 않는다.
  4. render : 컴포넌트를 리렌더링 한다.
  5. getSnapshotBeforeUpdate : 컴포넌트 변화를 DOM에 반영하기 직전에 호출한다.
  6. componentDidUpdate : 컴포넌트의 업데이트 작업이 끝난 후 호출한다.

(3) Unmount

• Unmount는 DOM에서 제거되어 화면에서 사라지는 것
  • Unmount 할 때 호출되는 메서드
  • componentWillUnmount : 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드