React를 쓰지만, 항상 Life Cycle을 제대로 이해못해서... 정리할 겸 포스팅하게 됐습니다!
이 글은 React Components의 Life Cycle을 제대로 이해하는 것을 목표로 합니다!

1. React Life 개요

일단 리액트의 라이프 사이클은 세가지 개념으로 동작합니다.

마운트, 업데이트, 언마운트 3가지 개념만 잘 이해하고 있으면 라이프 사이클을 알고 있다고 말할 수 있습니다.

마운트는 DOM이 생성되고 웹 브라우저에 나타나는 것을 말합니다.

업데이트는 데이터 변경으로 인해 컴포넌트가 refresh 되는 것을 말합니다.
아래와 같이 4가지 경우일 때, 업데이트를 실시합니다.
1. props가 바뀔 경우
2. state가 바뀔 경우
3. 부모 컴포넌트가 리렌더링될 때
4. this.forceUpdate를 이용하여 강제로 렌더링을 트리거할 때

언마운트는 마운트의 반대 과정으로 DOM에서 제거하는 것을 언마운트라고 합니다.

라이프 사이클의 전체적인 개요를 알아봤으니, 각 과정에서 지원하는 메소드들을 살펴보겠습니다.

2. Mount

2-1. constructor

컴포넌트를 새로 만들때마다 호출되는 클래스 생성자 메서드입니다.

2-2. getDerivedStateFromProps

props에 있는 값을 state에 넣을 때 사용하는 메서드입니다.

2-3. render

개발자가 정의한 JSX를 렌더링하는 메서드입니다.

2-4. componentDidMount

컴포넌트가 웹 브라우저에 렌더링이 된 후 호출되는 메서드입니다.

3. Update

3-1. getDerivedStateFromProps

마운트 과정에서도 호출이 되지만, 업데이트 과정에서도 호출이 됩니다.
props의 변화에 따라 state값에 변화를 주고 싶을 때, 사용됩니다.

3-2. shouldComponentUpdate

컴포넌트가 리렌더링을 해야할지 결정하는 메소드입니다.
true를 반환하면, 업데이트를 진행하고, 다음 사이클을 계속해서 이어나갑니다.
false를 반환하면, 작업을 중지합니다. 즉, 리렌더링 되지 않습니다.
this.forceUpdate() 함수를 호출할 경우, 이 과정을 생략하고 바로 render 함수를 호출합니다.

3-3. render

컴포넌트를 리렌더링 합니다.

3-4. getSnapshotBeforeUpdate

컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드입니다.

3-5. componentDidUpdate

컴포넌트 업데이트 작업이 끝난 후 호출하는 메서드입니다.

4. Unmount

컴포넌트를 DOM에서 제거할 때는 componentWillUnmount 메소드를 호출합니다.

4-1. componentWillUnmount