LyfeCycle API 소개 및 사용법 ⅰ

리액트에서 컴포넌트를 만들게 될 때 중요한 개념인 LifeCycle API에 대해서 알아보자. LifeCycle은 생명주기라고 알고 있으면 되는데

• 컴포넌트가 브라우저상에서 나타날 때 
• 업데이트 될 때
• 사라질 때

각각의 중간과정에서 무엇을 하고싶다 그러면 LifeCycle API를 사용하면 된다. 종류는 매우 많다. 아래그림을 보자.

이래해서 사용하는 시점에 잘 써먹을 수 있도록 하자.

React_LifeCycle API

 

종류가 많아서 단계별로 천천히 알아보자. Mouting이라는 것은 컴포넌트가 브라우저상에 나타난다는 것을 의미하고

Updating한다는 것은 컴포넌트의 props가 바뀌거나 state가 바뀌었을 때 나타나는 것이고 Unmouting은 컴포넌트가 브라우저상에서 사라질 때 그 과정을 unmouting이라고 한다.

 

Mounting에는 constructor가 있는데 사용자가 만든 컴포넌트가 처음 브라우저 상에 나타나게 될 때 만들어지는 과정에서 가장 먼저 실행되는 함수이다. 여기에서는 컴포넌트가 가지고 있는 state를 초기설정 한다던지 컴포넌트 만드는 과정에서 미리 해야하는 작업이 있다면 constructor에서 처리를 한다.

 

그리고 getDerivedStateFromProps 이것은 주로 props로 받은 값을 state에다가 동기화를 시키고 싶다 그러면 getDerivedStateFromProps 쓰면 된다. Mouting과정에서도 사용되고 Updating과정에서도 props가 바뀌게 되면은 getDerivedStateFromProps 함수가 실행이 된다.

 

render도 있는데 어떤 DOM을 만들게 될 지 외부에 있는 태그들은 어떠한 값을 전달해 주게 될지 정의해주고 실제로 브라우저상에 나타날 때 componentDidMount가 호출이 된다. componentDidMount 이 경우에는 주로 외부 라이브러리 디씨 차티스트 그러한 차트 라이브러리를 사용하게 될 때 componentDidMount에서 특정 DOM에다가 그려주세요라는 코드를 작성할 수 도 있고 혹은 네트워크 요청 API AJAX 요청을 해야한다 그런 경우에도 componentDidMount에서 처리하게 된다.

 

예를 들어 componentDidMount나타나고 몇 초 뒤에 무엇을 하고싶다 또는 컴포넌트가 나타난 다음에 해당 돔에서 스크롤 이벤트를 읽고싶다라고 작업을 하고싶을 때 componentDidMount를 사용한다.

componentDidMount는 사용자가 만든 브라우저에 나타난 시점에 어떠한 작업을 하겠다를 명시해주는 것이다. 그래서 주로 이벤트를 리스닝 한다던지 아니면 API 요청한다던지를 하는 것이다.

 

그리고 Updating에 보면 shouldComponentUpdate가 있는데 컴포넌트가 업데이트 되는 성능을 최적화시키고 싶을 때 사용한다. 일단 컴포넌트는 기본적으로 부모 컴포넌트가 re-rendering되면 부모 컴포넌트의 자식 컴포넌트들도 render함수가 실행이 되게된다.

 

VirtualDom에서 배운 것을 기억해보면 컴포넌트가 실제로 업데이트 된거만 바뀌기 때문에 가끔식 불편한데 이 때문에 rendering과정이 빠르다라고 기억할 것이다.

 

render함수가 호출되기는 하는데 실제 DOM상에는 반영이 되지 않는 것이다. 즉 실제 브라우저 DOM상에서는 바뀐 거

만 업데이트 되고 있긴한데, 일단 render함수가 VirtualDOM상에서 그리긴 한다는 것이다.

 

만약에 부모컴포넌트가 re-rendering이 되면은 자식 컴포넌트들도 rendering을 virtualDom에 해서 거기서 차이점을 가져와서 그걸 브라우저에 반영한다는 것이다. VirtualDom에 그리는 거 조차도 성능을 아끼고 싶다 그러면 shouldComponentUpdate를 사용한다.

 

만약에 컴포넌트가 몇 백개 몇 천개가 되면은 virtualDOM에 그리는거도 아껴줘야 성능을 아낄 수 있기 때문이다.

(성능 최적화에 대해서도 알아보자)

shouldComponentUpdate의 경우에는 true값이나 false값을 반환해 줄수가 있다. true값을 반환한다면 rendering process를 거치는 것이고 false를 반환한다 그러면 멈춰버린다.

React_LifeCycle API

만약에 New props 즉, props가 바꼈거나 setState state가 바꼈거나 했을 때 로직에 따라 shouldComponentUpdate에서 false를 반환하면은 실제로 rendering이 되지 않기 때문에 화면에도 반영이 되지 않는다. 그래서 shouldComponentUpdate에 대해서는 나중에 알아볼 것이고 함수의 용도는 virtualDOM에도 rendering하지말지 결정하는 것이라고 생각하면 된다. render함수가 호출되고 난 다음에는 getSnapshotBeforeUpdate라는 것이 호출되는데 rendering을 한 다음에 결과물이 브라우저상에 반영되기 바로 직전에 호출되는 함수라고 보면 된다. 즉 스크롤의 위치 해당 DOM의 크기 사전에 가져오고 싶다 그러한 작업을 할 때 getSnapshotBeforeUpdate을 사용한다.

 

componentDidUpdate라는 것이 있는데 해당 작업을 마치고 컴포넌트가 업데이트 되었을 때 호출하는 함수이다. 예를 들어서 state가 바꼈을 때 이전의 상태와 지금의 상태가 페이지가 바뀌었다 어떤 작업을 하겠다라고 할 수 있다.

 

마지막으로 Unmouting, 컴포넌트가 사라지는 과정에서 재호출되는 함수이다. 위에서 componentDidMount에서 특정 이벤트를 리스닝 할 수 있다고 했다. 사용자가 만든 DOM에서 스크롤이벤트 혹은 클릭이벤트를 리슨하게 했으면 componentWillUnmount에서는 componentDidMount에서 설정한 리스너를 없애주는 작업을 해준다.

 

 

 

<출처 : velopert(김 민준) 누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌>

https://www.inflearn.com/course/react-velopert/dashboard

누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌 - 인프런 | 강의

https://twitter.com/dan_abramov/status/981712092611989509

Dan on Twitter