React - 함수형 컴포넌트에서 라이프사이클 구현하는 법

React의 라이프사이클 메서드는 원래 클래스 컴포넌트에서만 지원되었지만, React Hook이 도입된 이후 함수형 컴포넌트에서도 라이프사이클 기능을 구현할 수 있게 되었습니다.

함수형 컴포넌트에서 라이프사이클 구현 방식

함수형 컴포넌트는 useEffect Hook을 사용해 다양한 라이프사이클을 구현할 수 있습니다. useEffect는 클래스 컴포넌트의 라이프사이클 메서드인 componentDidMount, componentDidUpdate, componentWillUnmount 등의 역할을 함수형 컴포넌트에서 수행할 수 있게 해줍니다.

주요 라이프사이클 비교

라이프사이클 메서드 | 클래스 컴포넌트 방식 | 함수형 컴포넌트 방식 (useEffect)

컴포넌트 마운트 시	componentDidMount	useEffect(() => { ... }, []);
업데이트 시	componentDidUpdate	useEffect(() => { ... });
언마운트 시	componentWillUnmount	useEffect(() => { return () => { ... }; }, []);

예시 코드: 함수형 컴포넌트에서 라이프사이클 사용

함수형 컴포넌트에서 마운트, 업데이트, 언마운트를 처리하는 예제입니다.

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

function App() {
  const [count, setCount] = useState(0);

  // 마운트 및 업데이트 시 실행
  useEffect(() => {
    console.log("컴포넌트가 마운트되거나 업데이트되었습니다.");

    // 언마운트 시 실행
    return () => {
      console.log("컴포넌트가 언마운트됩니다.");
    };
  }, [count]); // count가 변경될 때마다 실행

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

export default App;

정리

클래스 컴포넌트에서는 라이프사이클 메서드를 명시적으로 사용하는 반면, 함수형 컴포넌트에서는 useEffect Hook을 사용하여 비슷한 효과를 낼 수 있습니다. 최신 React에서는 함수형 컴포넌트와 Hook을 통해 라이프사이클 관리가 가능하므로, 둘 다 지원되지만 함수형 컴포넌트와 Hook을 사용하는 방식이 권장됩니다.