[React] LifeCycle API

React의 LifeCycle에 대해 Dan Abramov라는 개발자가 다이어그램을 그린 바 있다.

많은 프론트엔드 개발 블로그에서 인용된 유명한 그림이다. 

velopert님의 강의를 듣다 간단히 정리한다. 

참고 : 누구든지 하는 리액트 유투브, 튜토리얼

 

<React의 LifeCycle API>

컴포넌트가 놓인 상태에 따라 작업하려면 LifeCycle API를 적절히 사용한다. 

리액트의 생명주기는 크게 Mounting, Updating, Unmounting으로 나뉜다.

• Mounting : 컴포넌트가 브라우저 상에 나타나는 단계
• Updating : 컴포넌트의 props나 state가 변경되었을 때 수정하는 단계
• Unmounting : 브라우저에서 컴포넌트가 사라지는 단계

사진 출처 https://twitter.com/dan_abramov/status/981712092611989509

constructor

컴포넌트가 브라우저 상에 나타나면 constructor, 즉 생성자 함수가 가장 먼저 실행된다.

state 초기 설정 등을 수행한다.

 

getDerivedStateFromProps

props로 받은 값을 state에 동기화하고 싶을 때 사용한다.

Mounting과 Updating 단계에서 props가 바뀌면 사용될 수 있다.

Updating 단계에서 state가 바뀌면 getDerivedStateFromProps가 실행된다.

 

render

어떤 DOM을 만들지, 내부 태그에는 어떤 값을 전달할지 정의하고 브라우저에 표현한다.

 

componentDidMount

컴포넌트가 브라우저에 나타난 시점에 어떤 작업을 할지 명시해주는 기능을 한다.

이를 테면 외부 라이브러리(ex.차트 라이브러리)를 사용할 때 componentDidMount가 특정 DOM에다 "차트를 그려주세요"라는 요청을 하도록 코드를 작성할 수 있다.

혹은 네트워크 요청(ex.Ajax 요청)을 해야할 때에도 componentDidMount가 처리한다.

이외에도 컴포넌트가 나타나고 몇초 뒤에 무언가를 하고 싶을 때, 혹은 해당 돔에서 scroll event를 읽고 싶을 때, API를 요청하려 할 때, 이벤트를 listen할 때 등에 사용된다. 

 

shouldComponentUpdate

컴포넌트가 업데이트 되는 성능을 최적화하고 싶을 때 사용한다. 이는 Virtual DOM 렌더링과 관련된다. 

리액트의 Virtual DOM 원리에 따르면 컴포넌트를 먼저 Virtual DOM에만 render해서 변경사항만 실제 DOM에 update 한다.

리액트의 Virtual DOM 덕에 rendering이 빠르지만, 컴포넌트가 많아지면 render함수가 Virtual DOM에 그리는 일 조차도 부담스러울 수 있다.

부모 컴포넌트가 rerender 되면 자식 컴포넌트들도 render 되기 때문이다.

따라서 Virtual DOM에 그리는 성능 조차도 아끼고 싶을 때 shouldComponentUpdate를 사용한다. 

shouldComponentUpdate가 true를 반환하도록 만들면 rendering 프로세스를 거치며, false를 반환하면 props가 바뀌거나(New props) state가 변경될 때(setState) 이후의 과정을 진행하지 않는다. 

 

getSnapshotBeforeUpdate

render 함수 실행 뒤 렌더링 결과가 브라우저 상에 반영되기 직전에 호출된다.

이를테면 렌더링 뒤 update하기 전에 스크롤의 위치나 해당 DOM의 크기를 사전에 가져오는 과정에 사용된다.

 

componentDidUpdate

getSnapshotBeforeUpdate를 마치고 컴포넌트가 update되었을 때 호출된다.

예를 들어 state가 바뀌었을 때 이전 상태와 현재 상태의 페이지가 달라졌다면, 즉 this.state.page가 prevState.page와 다르다면 componentDidUpdate에서 원하는 작업을 지정할 수 있다.

 

componentWillUnmount

컴포넌트가 사라지는 과정에서 호출된다.

예를 들어 componentDidMount에서 특정 이벤트를 listen할 수 있는데, componentWillUnmount는 설정했던 listener를 없애는 작업을 한다.