React Lifecycle method

Liftcycle

# 시작하며

모든 사람이 그러하듯이, 지금까지 공부한 Component에는 Lifecycle, 즉 수명이 존재한다. Component의 수명은 페이지에 렌더링되기 전, 준비 과정에서부터, 페이지에서 사라질 때까지이다.

 

React 프로젝트를 설계함에 있어, 첫 렌더링을 실시할 때 어떠한 작업을 수행하거나, Component 업데이트 전 후로 작업을 수행해야 하는 경우가 발생한다. 이러한 경우에 바로 Lifecycle method를 사용하여 해결할 수 있다(Class Component에서만 가능). 

 

# Lifecycle method의 이해

Lifecycle method의 종류는 모두 9가지이다.

• Will이 붙은 method는 의미와 동일하게 어떤 작업을 작동하기 전에 실행
• Did 역시 의미와 같이 어떤 작업이 작동한 후에 실행

해당 method는 Class Component 상위에 선언함으로써 사용이 가능하다. Lifecycle은 세 가지로 구분이 가능하다.

1. 마운트
2. 업데이트
3. 언마운트

* Mount

DOM이 생성되고, 웹 상에서 나타나는 것을 mount라고 한다. 해당 mount가 발생할 때 호출하는 method 순서는 다음과 같다.

 

component 생성 >> getDerivedStateFromProps >> render >> componentDisMount

 

여기서 constructor는, component를 새로 만들 때마다 호출되는 class 생성자 method이다. getDerivedStateFromProps는 props에 있는 값을 state에 할당하기 위해 사용하는 method이며, render는 UI를 렌더링 하는 method다. 마지막으로 componentDidMount는, 앞서 설명했듯이 component가 웹 상에 나타난 후 호출하는 method이다.

 

* Update

React 프로젝트를 진행하면서, 업데이트를 해야 한 경우가 필수적으로 발생한다. 대표적으로 업데이트되는 상황은 다음과 같다.

 

- props 변경

- state 변경(setState)

- 부모 컴포넌트 re-rendering

- this.forceUpdate로 강제 rendering triger

 

이러한 네 가지 요인으로 인해, 업데이트가 발생하게 되면, 다음과 같은 method들을 호출한다.

 

update 발생 >> getDerivedStateFromProps >> shouldComponentUpdate >> (true/false) >> render >> getSnapsshotBeforeUpdate >> componentDidUpdate

 

부모 컴포넌트에서 넘겨받은 props를 변경할 때 업데이트가 발생하지만, 해당 props를 변경하지 않았음에도, 부모 컴포넌트가 re-rendering 됨으로써 자식 컴포넌트도 re-rendering 되어 업데이트가 발생하기도 한다.

 

* Unmount

해당 언마운트는, 말 그대로 마운트의 반대 과정이다. 즉 컴포넌트를 DOM에서 제거하는 것을 unmount라고 한다.

 

unmount >> componentWillUnmount

 

---

• render() 함수

render는 컴포넌트의 모양을 정의한다. 가장 중요한 method로, 필수적으로 사용해야 한다. 해당 method 안에서 this.props, this.state에 접근이 가능하지만, 이벤트 설정이 아닌 곳에서 setState를 사용하거나 DOM에 접근할 수 없다. 따라서 DOM 정보를 가져오거나 state에 변화를 주기 위해서는 componentDidMount 처리를 수행해야 한다.

• constructor method

컴포넌트 생성자 함수로, 컴포넌트를 만들 때 처음으로 실행되고 초기 state를 설정한다.

• getDerivedStateFromProps method

해당 method는 props로 받아 온 값을 state에 동기화시키는 용도로 사용하며 마운트와 업데이트 시 호출된다.

• componentDidMount method

컴포넌트를 만들고 첫 rendering이 끝난 후에 실행되는 method로서, 해당 함수 안에서 JS 라이브러리나 프레임워크 함수를 호출하여 이벤트 등록과 같은 비동기 작업을 처리할 수 있다.

• shouldComponentUpdate method

props나 state를 변경했을 때, re-rendering의 시작 여부를 지정하는 method. 반드시 true or false를 반환해야 하며, 따로 생성하지 않으면 기본적으로 true를 반환한다. 해당 함수 안에서 현재 props, state는 this를 붙여 접근하고 새롭게 설정되는 것에는 next를 붙여 접근한다.

• getSnapshotBeforeUpdate method

해당 method는 render에서 만들어진 결과물이 브라우저에 실제로 반영되기 직전에 호출된다. 반환 값은 componentDidUpdate의 snapshot 값으로 전달받고, 주로 업데이트 직전의 값을 참고하기 위해 호출한다.

• componentDidUpdate method

rendering을 완료한 후 호출하는 함수로서, 업데이트 끝난 직후 DOM 관련 처리가 가능하다. prev를 붙여 데이터 접근이 가능하다.

• componentWillUnmount method

컴포넌트를 DOM에서 제거할 때 실행된다. componentDidMount에서 등록한 이벤트, 타이머, 직접 생성한 DOM이 있을 경우 해당 함수에서 제거 작업을 수행해야 한다.

• componentDidCatch method

해당 함수는 컴포넌트 rendering 과정에서 error가 발생했을 때 애플리케이션이 고장 나지 않고 오류 UI로 전환될 수 있는 기능을 수행한다.