React 라이프 사이클

React 컴포넌트를 생성하거나 변경할 때 호출되는 여러 이벤트인 라이프 사이클에 대해서 설명하겠습니다.

 

 

1. 라이프 사이클 이란?

라이프 사이클이란 컴포넌트의 생성, 사용, 소멸될 때 까지의 일련의 과정을 뜻하며, 실행되거나 업데이트 될 때 특정 메소드가 호출됩니다.

 

크게 3가지의 종류의 라이프 사이클이 존재합니다.

 

1) Mount 시

 

2) Props 변경 시

 

3) State 변경 시

 

 

2. Mount 시

- 해당 컴포넌트가 최초로 실행될 때 발생하는 라이프사이클 입니다. 

 

- 순서 : Initialization -> componentWillMount -> render -> componentDidMount

 

1) Initialization (constructor) : props, state 의 defalut 값 설정

 

2) componentWillMount : props, state 변경 불가, DOM 접근 불가

 

3) render : DOM 생성 후 Mount

 

4) componentDidMount : DOM에 접근 가능, ajax 요청

 

 

3. Props 변경

- 해당 클래스의 props 가 변경될 때의 라이프사이클 입니다.

 

- 순서 : componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate

 

1) componentWillReceiveProps

 

2) shouldComponentUpdate : boolean 값을 반환하며 render를 할지 말기 결정할 수 있어 성능 최적화를 할 때 쓰임, return false를 통해 render 취소 가능

 

3) componentWillUpdate : state를 변경하면 에러 발생, props가 업데이트 되지 않음

 

4) render

 

5) componentDidUpdate : DOM에 접근 가능, ajax 요청

 

 

4. State 변경 

- setState 호출을 통해 해당 클래스의 state 값이 변경 될 때의 라이프사이클 입니다.

 

- 순서 : shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate

 

1) shouldComponentUpdate

 

2) componentWillUpdate

 

3) render

 

4) componentDidUpdate 

 

 

5. Unmount

- 더이상 해당 컴포넌트를 사용하지 않을 때 발생하는 이벤트 입니다.

 

1) componentWillUnmount : 컴포넌트 제거

 

 

6. Error

- 에러가 발생 했을 때 발생하는 이벤트 입니다.

 

1) componentDidCatch

 

 

* 참고사항

 

1) Props나 State 변경으로 인한 re-render 가 발생할 때, 모든 JSX 엘리먼트들을 다시 생성하는 것이 아니라 변경된 props 나 state 값이 존재하는 부분의 값이 변경된 후 다시 렌더링 됩니다.

 

2) 리액트 17부터는 componentWillMount, componentWillUpdate, componentWillReceiveProps 라이프 사이클이 deprecated 되고 getDerivedStateFromProps 로 변경 됩니다.

 

3) render 전에 DOM 접근이 불가할 때는 HTML 엘리먼트가 없기 때문에 document 관련 메소드들을 호출해도 사용이 불가합니다.

 

 

- 참고한 사이트 : 

1) React의 생명 주기(Life Cycle) : www.zerocho.com/category/React/post/579b5ec26958781500ed9955