[React] 라이프 사이클 메서드

리액트의 라이프사이클 메서드는 아래와 같은 형식으로 나누어 볼 수 있고,

총 9가지로 구성되어 있다.

 

시간 관계로 나누어 볼 때

• Will : 어떤 작업을 하기전에 실행되는 -
• Did : 어떤 작업이 되고 난 후 -

DOM 생성, 업데이트, 삭제 작업으로 나누어 볼 때

Mount

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

Update

• 다음과 같은 상황에서 업데이트를 한다. 총 4가지
  • props가 바뀔 때
  • state가 바뀔 때
  • 부모 컴포넌트가 리렌더링 될 때
  • this.forceUpdate로 강제로 렌더링을 트리거 할 때
• 위의 상황에서 업데이트를 진행하면 다음과 같은 메서드를 호출한다.
  • getDerivedStateFromProps
    : 이 메서드는 마운트에서도 호출되고, 업데이트가 시작하기 전에도 호출된다.
    : props의 변화에 따라 state의 값에도 변화를 주고 싶을 때 사용한다.
  • shouldComponentUpdate
    : 컴포넌트가 업데이트를 해야 할지, 말아야 할지 결정하는 메서드
  • render
    : 컴포넌트를 리렌더링하는 메서드
  • getSnapshopBeforeUpdate
    : 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드
  • componentDidUpdate
    : 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드

Unmount

• 마운트의 반대 과정, 컴포넌트를 DOM에서 제거하는 것
• 다음과 같은 메서드를 호출한다.
  • componentWillUnmount
    : 컴포넌트가 사라지기 전에 호출되는 메서드