Colin's Blog
[react] JSX에서 라이프사이클, useEffect 사용하기

React는 컴포넌트의 상태 변화 또는 렌더링이 발생할 때 특정한 생명주기 메서드를 호출함으로써 개발자에게 풍부한 컨트롤을 제공합니다. 라이프사이클 메서드는 클래스형 컴포넌트에서 사용되었으며, 훅을 이용해서 함수형 컴포넌트에서도 비슷한 작업을 수행할 수 있습니다.

라이프사이클 메서드

componentDidMount

componentDidMount 메서드는 컴포넌트가 생성되고 첫 번째 렌더링을 마친 후 호출됩니다. 이 메서드 안에서는 데이터를 불러오거나 외부 라이브러리를 초기화하는 작업을 수행할 수 있습니다.

class MyComponent extends React.Component {
  componentDidMount() {
    // 외부 데이터 불러오기 또는 라이브러리 초기화
  }
  //...
}

componentDidUpdate

componentDidUpdate 메서드는 컴포넌트의 업데이트가 발생한 후에 호출됩니다. prevProps, prevState를 매개변수로 받아서 변화를 감지하고 추가적인 작업을 수행할 수 있습니다.

class MyComponent extends React.Component {
  componentDidUpdate(prevProps, prevState) {
    if (this.props.data !== prevProps.data) {
      // 데이터가 바뀔 때 추가 작업 수행
    }
  }
  //...
}

componentWillUnmount

componentWillUnmount 메서드는 컴포넌트가 제거되기 전에 호출됩니다. 이 메서드에서는 타이머나 구독을 해제하는 작업 등을 수행할 수 있습니다.

class MyComponent extends React.Component {
  componentWillUnmount() {
    // 타이머나 구독 해제 등의 작업 수행
  }
  //...
}

useEffect 훅 사용하기

함수형 컴포넌트에서 라이프사이클 메서드와 유사한 작업을 수행할 수 있는 useEffect 훅을 사용할 수 있습니다.

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 초기화 작업 등을 수행
    return () => {
      // 정리 작업 등을 수행
    };
  }, [/*의존성 배열*/]);
  //...
}

useEffect 훅 안에서는 첫 번째 매개변수로 콜백 함수를, 두 번째 매개변수로 의존성 배열을 받습니다. 의존성 배열을 전달하면 해당 값이 변경될 때마다 콜백 함수가 호출됩니다.

라이프사이클 메서드에서 했던 작업을 함수형 컴포넌트에서도 간단히 처리할 수 있게끔 useEffect 훅을 사용해보세요!

마치며

이상으로 React에서 JSX에서 라이프사이클과 useEffect 훅을 사용하는 방법에 대해 알아보았습니다. 함수형 컴포넌트에서도 라이프사이클 메서드와 유사한 작업을 useEffect 훅을 통해 수행할 수 있으니, 편리하게 활용해보시기 바랍니다.

React 공식 문서 - 라이프사이클 메서드
React 공식 문서 - useEffect 훅

참고 자료:

© 2018 Colin. All rights reserved.