[React] 라이프 사이클(Life Cycle )

🧐 라이프 사이클이란?

React는 컴포넌트 기반의 개발을 가능케하는 라이브러리이다. 컴포넌트를 이용하여 view의 부분 부분을 구성할 수 있는데 이 컴포넌트에는 view에 랜더링되기 전 준비 과정부터 사라질 때까지의 라이프사이클을 가진다. 우리는 이 라이프사이클을 다루며 사용자가 원하는 view를 보여준다.

라이프 사이클은 크게 마운트, 업데이트, 언마운트 세가지 부분으로 나눌 수 있다.

1. 마운트

DOM이 생성되고 브라우저에 나타나는 것을 마운트(mount)라고 한다.

2. 업데이트

다음과 같은 네가지의 경우에 컴포넌트를 업데이트를 한다.

• props의 변경
• state의 변경
• 부모 컴포넌트의 리렌더링
• this.forceUpdate로 강제 렌더링 트리거

3. 언마운트

컴포넌트를 DOM에서 제거하는 것을 언마운트(unmount)라고 한다.

 

📘 라이프사이클 메서드

컴포넌트의 라이프사이클을 관리하기 위해서 메서드를 제공하는데 이는 클래스형 컴포넌트에서만 사용 가능하다. 함수형에서는 useEffect등 Hook을 사용하여 관리한다.

 

리액트에서 클래스형 컴포넌트의 라이프 사이클을 관리하는 메서드에는 총 9가지가 있는데 메서드 명에 따라 두가지 타입으로 나뉠 수 있다.

1. Will 접두사가 붙은 메서드: 어떤 작업을 작동하기 전에 실행
2. Did 접두사가 붙은 메서드: 어떤 작업을 작동한 후 실행

render()	컴포넌트의 모양새를 정의한다.  this.props, this.state에 접근 가능하고 리액트 요소를 반환한다.
constructor 메서드	컴포넌트의 생성자 메서드로 처음 실행되고 초기 state를 정의한다.
getDerivedStateFromProps 메서드	props로 받아 온 값을 state에 동기화시키는 용도로 사용된다.
componentDidMount 메서드	랜더링 이후, 내부에서 함수호출, 이벤트 등록, 네트워크 요청 등 비동기 작업을 처리한다.
shouldComponenetUpdate 메서드	props 또는 state가 변경되었을 때 리렌더링을 할지 여부를 지정한다.
getSnapshotBeforeUpdate 메서드	업데이트 직전의 값을 사용하기 위해 호출된다.
componentDidUpdate 메서드	리랜더링 이후, DOM 관련 작업을 할 수 있다. 또한 이전의 데이터에 접근 가능하다.
componentWillUnmount 메서드	컴포넌트를 DOM에서 제거한다.
componentDidCatch 메서드	컴포넌트 랜더링 도중 에러가 발생했을 때 오류UI를 보여준다.

 

각 메서드가 사용되는 시기 및 단계를 그림으로 표현하면 다음과 같다.

컴포넌트가 생성 될 때(마운트)

1. constructor : 클래스 생성자 메서드

2. getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용하는 메서드

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

4.componentDidMount : 컴포넌트가 웹 브라우저 상에 나타난 후 호출하는 메서드로 DOM관련 작업, 비동기 작업을 수행한다.

 

컴포넌트를 업데이트 할 때 (업데이트)

1. getDerivedStateFromProps : 컴포넌트의 props나 state가 변경됐을 때도 호출되는 메서드

2. shouldComponentUpdate : 컴포넌트의 리렌더링 여부를 결정하는 메서드

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

4. getSnapshotBeforeUpdate : 컴포넌트의 변화를 DOM에 반영하기 직전에 호출하는 메서드로 변경되기 이전값을 사용할 수 있다.

5. componentDidUpdate : 컴포넌트의 업데이트 작업이 끝난 뒤에 호출되는 메서드

 

컴포넌트를 제거 할 때 (언마운트)

1. componentWillUnmount : 컴포넌트가 브라우저에서 사라지기 전에 호출되는 메서드로 주로 DOM에 직접 등록했던 이벤트를 제거하는 등의 작업을 한다.