4. 리액트가 내부적으로 작동하는 순서, Component Lifecycle

안녕하세요, 프로독학러 입니다.

이번 포스팅에서는 Component Lifecycle 에 대해서 알아보도록 하겠습니다.

Component Lifecycle 은 리액트가 내부적으로 작동하는 순서이며, 이를 활용해 각 단계 마다 원하는 동작을 취하게 할 수 있습니다.

Component Lifecycle 은 컴포넌트가 생성되었을 때, 프롭스가 변경되었을 때, 스테이트가 변경 되었을때, 컴포넌트가 삭제 되었을 때 각각 다른 순서로 작동합니다.

전체적인 Component Lifecycle 의 구성은 다음과 같습니다.

가장 왼쪽의 그림부터 살펴보겠습니다.

컴포넌트가 생성 되었을 때 리액트가 동작하는 방식입니다.

1) 컴포넌트를 초기화 합니다. (constructor를 통해 state를 초기화, 기본 프롭스값)

2) componentWillMount API 가 실행 됩니다.

이  API 는 컴포넌트가 DOM 위에 만들어 지기 전에 실행되는 API 입니다.

* 이 단계에서 DOM 처리는 불가능 합니다.

3) 렌더링을 진행합니다.

4) componentDidMount 는 렌더링이 완료되고 실행되는 API 입니다.

* 이 단계에서 다른 자바스크립트 프레임워크와 연동 및 setTimeout, setInteval, AJAX 등을 사용합니다.

* DOM 처리가 가능합니다.

두 번째 그래프는 프롭스가 변경되었을 때(전달 받을 때) 리액트가 동작하는 방식입니다.

1) componentWillReceiveProps 는 상위 컴포넌트로 부터 props 를 받을 때 실행 됩니다.

이 단계는 props 에 따라 state 를 업데이트하는 경우에 사용하면 유용합니다.

* 이 단계에서 setState 를 해도 괜찮습니다.

* componentWillReceiveProps API의 인자로 nextProps 가 들어옵니다. (바뀔 프롭스)

2) shouldComponentUpdate 는 props 나 state 가 변경 되었을 때 다시 렌더링을 할지 말지 결정하는 API 입니다. 

리턴값은 true 이거나 false 입니다.

만약 리턴값이 true 라면 다음 단계인 렌더링을 진행하지만, false 일 경우에는 Component Lifecycle 이 shouldComponentUpdate 단계에서 멈춥니다.

* shouldComponentUpdate 의 인자로 nextProps 와 nextState 가 들어옵니다. (바뀔 프롭스와 스테이트)

3) shouldComponentUpdate 리턴 값이 true 이면 다시 렌더링 합니다.

4) componentWillUpdate 는 컴포넌트가 업데이트 되기 전에 실행되는 API 입니다.

* 이 단계에서는 스테이트를 변경하면 안 됩니다. (setState 사용금지, state 가 변경되면 리렌더링 해야함, 무한루프발생)

* componentWillUpdate 의 인자로 nextProps 와 nextState 가 들어옵니다. (바뀔 프롭스와 스테이트)

5) componentDidUpdate 는 렌더링과 모든 업데이트가 완료된 후에 실행되는 API 입니다.

* 이 단계에서는 스테이트를 변경하면 안 됩니다. (setState 사용금지, state 가 변경되면 리렌더링 해야함, 무한루프발생)

* componentDidUpdate 의 인자로 prevProps 와 prevState 가 들어옵니다. (변경되기 이전의 프롭스, 스테이트)

세 번째 그래프는 스테이트가 변경되었을 때 리액트가 작동하는 방식으로, 

shouldComponentUpdate -> render -> componentWillUpdate  -> componentDidUpdate 순으로 동작합니다.

네 번째 그래프는 컴포넌트가 삭제 될 때의 API로, 컴포넌트가 DOM 에서 사라진 후 실행됩니다.

Component Lifecycle 을 이용하면 각 단계마다 다른 인터페이스를 보여주거나 로딩 중 일때 로딩 아이콘을 보여주거나 하는 작업을 쉽게 할 수 있습니다.

다음 포스팅에서는 지금까지 공부한 개념들을 바탕으로 간단한 어플리케이션을 만들어 보도록 하겠습니다.

감사합니다.

**참고 자료 (항상 감사드립니다)

https://velopert.com/reactjs-tutorials

*다녀가셨다는 표시는 공감으로 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)