240524 TIL

useEffect

useEffect는 React의 Hook 중 하나로, 함수형 컴포넌트에서 부수 효과를 처리하는 데 사용됩니다. 부수 효과란 주로 데이터 fetching, 구독(subscriptions), 혹은 수동으로 DOM을 조작하는 작업 등을 의미합니다. 이러한 작업들은 컴포넌트의 렌더링과는 독립적으로 이루어지며, 컴포넌트의 생명주기와 관련이 있습니다.

기본 사용법

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 이 곳에 부수 효과를 처리하는 코드를 작성합니다.
    console.log('컴포넌트가 렌더링될 때마다 이 코드가 실행됩니다.');

    // 반환하는 함수는 cleanup 함수로, 컴포넌트가 unmount 되거나 다음 effect가 실행되기 전에 실행됩니다.
    return () => {
      console.log('컴포넌트가 사라질 때 실행됩니다.');
    };
  });

  return <div>My Component</div>;
}

위의 예제에서 useEffect는 컴포넌트가 렌더링될 때마다 실행되는 함수를 받고 있습니다. 이 함수는 부수 효과를 수행하고, 옵션으로 cleanup 함수를 반환할 수 있습니다.

의존성 배열 활용

특정 props나 state가 변경될 때만 useEffect가 실행되도록 설정할 수 있습니다. 이는 두 번째 매개변수로 의존성 배열(dependency array)을 제공하여 구현됩니다:

useEffect(() => {
  // 이 곳에 부수 효과를 처리하는 코드를 작성합니다.
  console.log('count 값이 변경될 때마다 이 코드가 실행됩니다.');

  return () => {
    console.log('컴포넌트가 사라질 때 실행됩니다.');
  };
}, [count]); // count 값이 변경될 때만 실행

useEffect는 이렇게 특정 데이터에 의존하여 작업을 수행하도록 설정됩니다. 만약 의존성 배열을 비워두면 컴포넌트가 렌더링될 때마다 useEffect가 실행되며, 배열을 전달하지 않으면 컴포넌트가 마운트될 때 한 번만 실행되며, 컴포넌트가 사라질 때 cleanup 함수가 실행됩니다.

useEffect를 통해 React 컴포넌트의 부수 효과를 효과적으로 관리할 수 있습니다.