React Life Cycle

리액트 라이프 사이클이란?
브라우저상에 나타나고, 업데이트되고, 사라지게될 때와 컴포넌트에서 에러가 났을 때 호출되는 메서드들이다.
리액트 클래스 컴포넌트는 라이프 사이클 메서드를 사용하고, 함수형 컴포넌트는 Hook을 사용한다.

출처:https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

Mount(마운트)

컴포넌트가 처음 실행될 때를 Mount라고 표현한다.

마운트시 호출되는 메서드

• constructor : 컴포넌트의 생성자 메서드로 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드이다.

• getDerivedStateFromProps : props로 받아온 것을 state에 넣어주고 싶을 때 사용한다.

• render : 컴포넌트를 렌더링하는 메서드이다.

• componentDidMount : 컴포넌트의 첫번째 렌더링이 마치고 나면 호출되는 메서드로 컴포넌트가 브라우저에 나타난 상태이다. 해당 컴포넌트에서 필요로 하는 데이터를 요청하기 위해 axios, fetch 등을 통해 ajax를 요청하거나 DOM의 속성을 읽거나 직접 변경하는 작업을 진행한다.

Update(업데이트)

• getDerivedStateFromProps : 컴포넌트의 props나 state가 바뀌었을 때 호출된다.
• shouldComponentUpdate : 컴포넌트가 리렌더링 할지 말지를 결정하는 메서드이다. 주로 최적화할 때 사용하는 메서드로 React.memo의 역할과 비슷하다고 이해하면 된다.
• render : 컴포넌트를 렌더링하는 메서드이다.
• getSnapshotBeforeUpdate : 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출된다.
• componentDidUpdate : 컴포넌트 업데이트 작업이 다 끝난 뒤 호출된다.

UnMount(언마운트)

Mount(마운트)의 반대 과정으로 컴포넌트를 DOM에서 제거하는 것을 Unmount라고 한다.
componentWillUnmount : 컴포넌트가 브라우저상에서 사라지기 직전에 호출된다.
DOM에 직접 등록했던 이벤트를 제거하고 만약 setTimeout을 걸은것이 있다면 clearTimeout을 통해 제거한다.