라이프 사이클이란?

리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프사이클 즉, 컴포넌트의 수명 주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이난다.

크게 세가지 유형으로 나눌 수 있는데 생성 될때, 업데이트 할 때, 제거할 때이다. 이를 리액트에서는 마운트, 업데이트, 언마운트라고 한다.
여기서 마운트는 DOM이 생성되고 웹 브라우저 상에서 나타나는 것을 뜻하고, 반대로 언마운트는 DOM에서 제거되는 것을 뜻한다.

주의하여 볼 것은 업데이트 부분인데, 업데이트는 다음과 같은 4가지 상황에서 발생한다.
1. props가 바뀔 때
2. state가 바뀔 때
3. 부모 컴포넌트가 리렌더링 될 때
4. this.forceUpdate로 강제로 렌더링을 트리거할 때

클래스

생성 및 마운트
컴포넌트 인스턴스가 생성되고 DOM트리에 삽입될 때 까지, 다음의 함수들이 순차적으로 호출됩니다.

constructor()
컴포넌트의 생성자입니다.

getDerivedStateFromProps()
컴포넌트가 최초로 마운트 될 때와 갱신 시, render()함수를 호출하기 직전에 무조건 호출되는 함수입니다. (따라서, 성능 최적화에 대해 고민을 해야 합니다.)
state를 갱신하기 위한 함수입니다.
일반적으로는 추천되는 함수는 아니며, 시간에 따라 변하는 props에 대해 state가 반응해야 할 때(즉, state가 props에 의존하는 경우) 적합한 함수입니다.
하지만 다음과 같은 여러가지 많은 대응법이 있으니, 그 방법을 사용하는 것이 좋습니다.

props의 변화에 따른 로직이 필요하다면, componentDidUpdate()함수를 사용하세요.
props가 변화했을 때에만 일부 데이터를 다시 계산하고 싶다면, Memoization Helper를 사용하세요.
props가 변화할 때 일부 state를 갱신하고 싶다면, 완전 제어 컴포넌트 혹은 key를 사용하는 완전 비제어 컴포넌트로 만들어 사용하세요.

componentWillMount()
컴포넌트가 DOM 트리에 추가되기 전에 실행되는 함수입니다.
React 공식 문서에 따르면, deprecated 된 함수입니다. 대신 UNSAFE_componentWillMount()라는 함수를 사용할 수 있습니다.

componentDidMount()
컴포넌트가 DOM 트리에 추가된 직후 실행되는 함수입니다.
외부 라이브러리의 사용, AJAX를 통한 데이터 패치, DOM 관련 작업을 수행하기에 적합합니다. 또한 데이터 구독(subscribe)을 하기 좋은 함수이며, 데이터를 구독했다면 반드시 componentWillUnmount()에서 구독 해제를 해줘야 합니다.
가끔 모달 창이나 툴팁과 같이 렌더링 이전에 DOM의 크기나 위치를 알아야 하는 경우가 있습니다. 이런 경우에는 해당 함수 내에서 setState()를 호출할 수 있습니다. 단, 추가적인 렌더링이 발생하며 성능 저하가 발생할 수 있습니다. (하지만 브라우저의 화면 갱신 전에 수행되므로, 사용자가 이중 렌더링을 확인할 수는 없습니다.)

업데이트
props 또는 state가 변경되면 갱신이 발생합니다. 아래 메서드들은 컴포넌트가 다시 렌더링될 때 순서대로 호출됩니다.

getDerivedStateFromProps()
위에서 설명했으므로, 생략하겠습니다.

componentWillReceiveProps
해당 함수는 deprecated되었으며, UNSAFE_componentWillReceiveProps()로 대체되었습니다.

shouldComponentUpdate()
해당 함수는 props나 state가 갱신되어 렌더링이 발생하기 전 호출되며, 초기 렌더링이나 forceUpdate()호출 시에는 호출되지 않습니다.
성능 최적화를 위해 사용하는 것이 좋으며, 렌더링 방지용으로 사용하지 않기를 권장합니다. 렌더링 방지를 위한 목적이라면, Pure Component를 사용하는 것이 좋습니다. 다만, 자신이 있다면 사용해도 됩니다.

componentWillUpdate()
해당 함수는 deprecated되었으며, UNSAFE_componentWillUpdate()로 대체되었습니다.

render()
해당 함수는 컴포넌트 내에서 반드시 구현되어야 할 유일한 생명주기 함수입니다.
함수 내에서 다음 중 하나를 반드시 반환해야 합니다.

React Element (보통 JSX를 이용)
배열과 Fragment
Portal
문자열 혹은 숫자
Boolean 혹은 null

해당 함수는 순수해야 하며, 브라우저와 상호작용이 필요한 경우에는 componentDidMount()와 같은 다른 생명주기 함수에서 수행하는 것이 좋습니다.

getSnapshotBeforeUpdate()
해당 함수는 가장 마지막으로 렌더링된 결과가 DOM등에 반영된 경우 호출됩니다.
해당 함수의 반환값은 componentDidUpdate()의 인자로 전달되므로, 컴포넌트의 스크롤 위치 변경 같은 정보를 활용할 수 있게 해 줍니다. 

componentDidUpdate()
해당 함수는 최초 렌더링 이후에는 호출되지 않으며, 갱신이 이루어진 직후에 호출됩니다.
컴포넌트가 갱신되었을 때 DOM조작을 수행하기 적합하며, props의 변경에 따른 AJAX를 수행하기에 좋습니다.
해당 함수에서 setState()를 호출하면 무한 갱신이 발생할 수 있으므로, 조심해야 합니다. 또한 props를 그대로 state로 복사하여 사용하는 것보단, props 그 자체를 사용하는 것이 좋습니다.

마운트 해제
컴포넌트가 DOM트리에서 제거될 때 호출됩니다.

componentWillUnmount()
해당 함수는 컴포넌트가 DOM트리에서 제거되기 직전에 호출됩니다.
타이머 제거, 네트워크 요청 취소, 구독 해제 등 컴포넌트 정리 작업을 수행하기에 적합합니다.
해당 함수가 호출되면 컴포넌트는 리렌더링되지 않으므로, 해당 함수 내에서 setState()를 호출하면 안 됩니다.

오류 처리
getDerivedStateFromError()
해당 함수는 자손 컴포넌트에서 에러가 발생한 경우 호출됩니다.
반드시 갱신된 state를 반환해야 하며, 렌더 단계에서 수행되므로 부수효과를 일으키면 안 됩니다.

componentDidCatch()
해당 함수도 자손 컴포넌트에서 에러가 발생한 경우 호출됩니다.
해당 함수는 커밋 단계에서 수행되므로, 부수효과를 일으켜도 괜찮습니다.

함수형(Hook)

리액트 훅은 함수형 컴포넌트에서 클래스형 컴포넌트의 기능을 구현한 개념입니다. 예를 들어, 클래스 컴포넌트에서만 사용 가능했던 state를 훅(hook)을 이용해 함수형 component에서도 useState를 이용해서 상태 변수를 선언할 수 있다. 또한 useEffect를 통해 리액트 클래스의 componentDidMount, domponentDidUpdate, componentWillUnmount와 같은 라이프 사이클을 관리할 수 있다.