React 생명주기 (lifecycle)

React 생명주기 (lifecycle)

리액트는 컴포넌트 라이브러리로써, 각 컴포넌트가 라이프 사이클(Mount(생성될 때), Update(업데이트할 때), Unmount(제거할 때))을 가지고 있습니다.
React 클래스 생명 주기는 다음과 같은 그림으로 움직입니다.

출처: https://github.com/wojtekmaj/react-lifecycle-methods-diagram

GitHub - wojtekmaj/react-lifecycle-methods-diagram: Interactive React Lifecycle Methods diagram.

 

constructor: 클래스에서 사용하는 생성자 함수로써 state 를 설정합니다.
getDerivedStateFromProps: 리액트 16.3 >= 부터 생긴 메서드로 최초 Mount 와 Update 될 때 호출되며, state 를 갱신하기 위한 객체 반환, null을 반환하여 갱신하지 않을 수도 있음.
shouldComponentUpdate: state, props 의 변화로 렌더링을 다시 할지 정하는 기능입니다. 값이 갱신 시에 렌더링 동작이 수행됩니다. (해당 메소드에서 깊은 검사를 할시 비효율적으로 성능이 악화될 수도 있음.)
render: 컴포넌트를 렌더링 할 때 사용하는 함수입니다.
getSnapshotBeforeUpdate: 가장 마지막으로 렌더링된 결과가 DOM 에 반영되기 전에 호출됨. 여기서 반환하는 값은 componentDidUpdate() 에 인자로 반환됩니다.

componentDidMount: 컴포넌트가 렌더링을 맞친 후(마운트가 된 후), 발생합니다.
componentDidUpdate: 컴포넌트가 업데이트 되어 렌더링 된 이후 발생합니다.
componentWillUnmount: 컴포넌트를 Dom 에서 제거할 때 실행됩니다. MocomponentDidMount 에서 등록한 이벤트를 여기서 제거합니다.

React Hooks 생명주기

React Hooks 를 사용하게 되면 useEffect 를 통해 Lifecycle 을 관리하게 됩니다.
클래스 기반으로 사용했던 componentDidMount, componentDidUpdate, componentWillUnmount 를 useEffect 에서 관리할 수 있습니다.

또한, useState 를 사용하여 state 를 설정하고 관리할 수 있습니다.

import React, { useState, useEffect } from 'react';

const [name, setName] = useState('James');

useEffect(() => {
    effect
    return () => {
      cleanup
    };
}, [input]);

이러한 면을 봤을 때 Hooks 를 사용하면 클래스 기반의 코드를 정리하고 짧고 간결한 코드로 사용할 수 있게 되는 것을 볼 수 있습니다.

회고

조금 다를 수는 있지만, 마운트 시점문제로 간혹 React, Vue 를 사용하면서 동적 import 를 사용 시에 Dom 이 로드되는 시점과 import 되는 시점이 어긋나는 문제가 발생했었다.
Dom 이 생성되있지 않은 시점에 요소를 가져오려고 하여 오류가 발생한다든지, 시점이 어긋나서 그려지지 않는다든지 등 문제가 발생했었다. (문제는 Dom 의 접근 요소가 준비됐을 시, Dom의 state 를 보고 해결함...)