리액트의 useEffect로 컴포넌트 생명주기 관리하기

소개

리액트의 함수형 컴포넌트에서 useEffect 훅은 컴포넌트의 생명주기 관리에 핵심적인 역할을 합니다.

이 글에서는 useEffect를 활용하여 컴포넌트의 마운트, 업데이트, 언마운트 단계에서

어떻게 작업을 수행하는지에 대해 간단하게 알아보겠습니다.

1. 마운트(Mount)

컴포넌트가 처음으로 화면에 나타날 때(마운트 시점)의 작업을 useEffect 내에서 처리할 수 있습니다.

이를 통해 클래스형 컴포넌트의 componentDidMount와 유사한 동작을 수행할 수 있습니다.

import React, { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    // 컴포넌트가 처음 마운트될 때 실행되는 콜백함수
    console.log('Component is mounted');
    // ... 추가 작업 수행
  }, []); // 빈 배열을 전달하여 처음 마운트될 때만 실행
  
  return (
    <div style={{ padding: 20 }}>
      ...
    </div>
  );
}

export default MyComponent;

useEffect는 첫번 째 인자로 콜백함수가 들어가며 두번 째 인자로 dependency array라는 배열이 들어가게 됩니다.

이 때 배열을 빈배열로 전달하게 되면

컴포넌트가 마운트되는 시점에 콜백함수를 실행합니다.

2. 업데이트(Update)

컴포넌트가 업데이트될 때마다 실행되는 작업 또한 useEffect 내에서 처리할 수 있습니다.

이때, 두 번째 매개변수로 전달되는 배열에 의해 특정 값이 변경될 때만 실행되도록 제어할 수 있습니다.

이를 통해 클래스형 컴포넌트의 componentDidUpdate와 유사한 동작을 수행할 수 있습니다.

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

const UpdateComponent = () => {
  const [data, setData] = useState(0);

  useEffect(() => {
    // data가 변경될 때만 실행되는 로직
    console.log(`data is update : ${data}`);
    // ... 추가 작업 수행
    if (data > 5) {
      alert("data 5를 넘었습니다. 따라서 1로 초기화힙니다.");
      setData(1);
    }
  }, [data]); // data가 변경될 때만 실행
  
  return (
    <div style={{ padding: 20 }}>
      <div>
        {data}
        <button onClick={() => setData(data + 1)}>+</button>
      </div>
    </div>
  );


export default UpdateComponent;

useEffect의 두번 째 인자인 dependency array에 있는 값이 변경될 때 (컴포넌트 업데이트 시점)

첫번 째 인자인 콜백함수가 실행됩니다.

3. 언마운트(Unmount)

컴포넌트가 화면에서 사라지기 전에 정리(clean-up) 작업을 수행하려면

useEffect 내에서 반환하는 함수(return)를 활용합니다.

이는 클래스형 컴포넌트의 componentWillUnmount와 유사한 동작을 합니다.

import React, { useEffect } from 'react';

const UnmountComponent = () => {
  useEffect(() => {
    console.log("Mount!");

    // 정리(clean-up) 함수(컴포넌트 Unmount 시점)
    return () => {
      console.log("Unmount!");
      // ... 정리 작업 수행
    };
  }, []); // 빈 배열을 전달하여 언마운트 시에만 실행
}

export default UnmountComponent;

위처럼 useEffect 내에서 return 되는 함수를 활용하여 

컴포넌트가 언마운트되는 시점을 관리할 수 있습니다.

 

마무리

useEffect는 함수형 컴포넌트에서 컴포넌트의 생명주기를 관리하는 핵심 도구입니다.

컴포넌트의 마운트, 업데이트, 언마운트 단계에서의 작업을 효율적으로 처리하여

리액트 애플리케이션을 더 효과적으로 구성할 수 있습니다.

useEffect를 활용하여 컴포넌트의 생명주기를 관리하고, 코드를 깔끔하게 유지해보세요.