타입스크립트 사용자를 위한 React LifeCycle API

React는 JavaScript + Flow로 개발된 프레임워크라 TypeScript 관련해서는 자료가 많지 않죠.

그래서 한번 정리했습니다. 순서는 실행되는 순서고, 아래 컴포넌트를 기준으로 합니다.

import React, { Component } from 'react'

interface IProps { ... }

interface IState { ... }

class MyComponent extends Component<IProps, IState> { ... }

Mount

Constructor

constructor (props: IProps)

너무 당연하게도 constructor가 가장 먼저 실행됩니다.

Get Derived State From Props

static getDerivedStateFromProps(nextProps: IProps, prevState: IState): IState

쓸 때 좀 조심해야 하는 함수입니다.

개발을 진행하다 보면 Prop 값을 적당히 다듬어서 State에 저장하게 될 일이 있는데, 그 때 쓰면 되는 API입니다. 조심해야 할 점은 static 함수라 this를 쓸 수 없다는 거죠. 대신 파라메터를 이용해 새롭게 변경된 State를 리턴하면 됩니다.

Render

render (): ReactNode

다들 알고 계실 렌더 함수.

Component Did Mount

componentDidMount ()

컴포넌트의 Mount가 완료되고 렌더링 되어 화면에 출력된 직후에 실행됩니다.

이 때부터 렌더링이 완료되었기 때문에 레이아웃 크기 같은 Raw 데이터에 접근할 수 있습니다.

Update

Prop 혹은 State가 변경되었을 때 실행됩니다.

Get Derived State From Props

위에서 설명했죠.

Should Component Update

shouldComponentUpdate (nextProps: IProps, nextState: IState): boolean

최적화를 위한 함수로, 컴포넌트가 업데이트 되어야 하는지 검사합니다. 이 함수가 false를 반환하면 업데이트를 중단합니다.

혹시 forceUpdate를 호출해서 업데이트 하던 중이라면 이 함수는 실행되지 않습니다.

PureComponent를 사용한다면 이 메소드는 기본적으로 작성되어 있습니다. PureComponent는 이 함수를 이용해 Prop과 State가 달라졌는지 검사하게 됩니다. 얕은 비교를 수행하기 때문에 중첩된 Prop이나 State는 감지하지 못합니다.

일반 Component는 () => true가 기본값입니다.

Render

역시 여기서도 렌더링을 수행합니다.

Get Snapshot Before Update

getSnapshotBeforeUpdate (prevProps: IProps, prevState: IState): SS | null

가상 DOM에 렌더링 한 이후, 그 값을 실제 DOM에 반영하기 전에 실행되는 함수입니다.

여기서 어떤 값을 리턴하면 componentDidUpdate 함수에서 그 값을 사용할 수 있게 됩니다.

Component Did Update

componentDidUpdate(prevProps: IProps, prevState: IState, snapshot: SS)

업데이트가 완료된 직후 호출되는 함수입니다. 세 번째 파라메터로 getShapshotBeforeUpdate 함수에서 리턴한 값을 받습니다.

이 안에서는 setState 함수를 조심히 써야 합니다. 자칫하면 state 변경 -> 업데이트 -> state 변경 -> ... 같이 무한 루프에 빠질 수 있기 때문이죠. 그리고 어쨌든 렌더링 한 직후 다시 한번, 혹은 그 이상 렌더링 해야 하기 때문에 성능에도 좋지 않고요.

Unmount

Component Will Unmount

componentWillUnmount ()

컴포넌트가 DOM에서 제거되기 전 실행되는 함수입니다.

이 함수의 실행이 끝나면 즉시 해당 컴포넌트는 삭제됩니다.

Error

Get Derived State From Error

static getDerivedStateFromError (error: Error): IState

오류가 발생했을 때 실행되는 함수로 사용자에게 오류 화면을 띄워주기 위한 state를 리턴하면 됩니다.

Component Did Catch

componentDidCatch (error: Error, info: ErrorInfo)

오류가 발생했을 때 실행되는 함수로 오류의 상세한 데이터를 가지고 있어 로그를 찍어주기 좋은 함수입니다.