React - 생명주기 ( Life cycle ) 개념정리

생명주기 ( Life cycle )

React에서 각각의 컴포넌트에는 Life Cycle, 즉 생명주기가 존재한다.
컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝이난다.

React 생명주기 단계

사진 출처

Life Cycle의 분류

Life Cycle은 총 9가지가 존재합니다.
크게 3가지 유형으로 나누어 보면 마운트 될때 / 업데이트 될때 / 언마운트 될때로 나뉩니다.

• 마운트 ( Mount )

  마운트는 DOM 객체가 생성되고 브라우저에 나타나는것을 의미합니다.
  이때 호출되는 메서드들로는 Constructor / GetDerivedStateFromProps / Render / ComponentDidMount가 있습니다.

  • Constructor : 컴포넌트 클래스의 생성자 함수로 state의 초기값을 지정할 때 사용합니다.
  • GetDerivedStateFromProps : props를 이용해 state 값을 얻을때 사용하는 메서드입니다.
  • Render : 컴포넌트의 기능과 모양을 정의하는 메서드입니다.
  • ComponentDidMount : 컴포넌트를 생성후 첫 렌더링이 끝났을때 실행되는 메서드입니다.

• 업데이트 ( Update )

  컴포넌트가 업데이트 될 때 실행되는 메서드들로는 GetDerivedStateFromProps / ShouldComponentUpdate / Render / GetSnapShotBeforeUpdate / ComponentDidUpdate

  • GetDerivedStateFromProps : props를 이용해 state 값을 얻을때 사용하는 메서드입니다.
  • ShouldComponentUpdate : 리렌더링을 할지 말지 결정하는 함수입니다. true를 반환하면 업데이트에 따른 리렌더링을 하고 false를 반환하면 리렌더링을 하지 않습니다.
  • Render : 컴포넌트의 기능과 모양을 정의하는 메서드입니다.
  • GetSnapShotBeforeUpdate : 렌더링 결과가 DOM에 반영되기 직전에 호출되는 메서드입니다.
  • ComponentDidUpdate : 컴포넌트 업데이트가 끝난 리렌더링 후 호출되는 메서드입니다.

• 언마운트 ( Unmount )

  언마운트는 DOM에서 컴포넌트가 제거되는것을 의미합니다.
  이때 호출되는 메서드는 ComponentWillUnmount 메서드 입니다.

  • ComponentWillUnmount : 해당 컴포넌트가 제거되기 직전에 호출됩니다.