[React] useEffect란 무엇이고 언제 사용해야 할까?

 

useEffect란?

useEffect는 간단하게 설명해서 React Component에서 Side Effect를 수행하는 Hook입니다. Side Effect란 상태 변화 이외에 작업을 말합니다.

예를 들면, API 호출, 이벤트 등록, 타이머 설정 등이 있습니다.

 

 

useEffect 사용법

useEffect는 컴포넌트가 렌더링 된 이후에 실행되며, 컴포넌트가 Unmount 될 때 정리(claen-up)작업을 수행합니다.

useEffect는 기본적으로 렌더링 이후에 매번 실행되며, 두 번째 인자로 의존성 배열(Defendency Array)을 전달하여 해당 의존성이 변경될 때만 실행되도록 설정할 수 있습니다.

 

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

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

  useEffect(() => {
    console.log('Component did mount or update');
  }, [count]);

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

위 예제에서 count가 dependency 배열에 추가된걸 확인할 수 있습니다.

즉 count가 변화할 때마다 useEffect가 실행되며 console이 찍히는걸 확인해 볼 수 있습니다.

 

의존성 배열을 전달하지 않는다면, 매 렌더링마다 useEffect가 실행됩니다.

 

 

useEffect 정리 (clean-up)

useEffect는 컴포넌트가 Unmount될 때 정리(clean-up) 작업을 수행합니다. API 호출, 이벤트 등록, 타이머 설정 등의 작업에서는 반드시 정리 작업을 수행해야 합니다.

 

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

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

  useEffect(() => {
    console.log('Component did mount or update');
  }, [count]);

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

위 예제에서, setInterval을 실행한 후에 정리 함수를 반환하여 setInterval을 정리합니다. 

정리 함수는 useEffect의 두 번째 인자로 빈 배열을 전달하여, 컴포넌트가 Mount될 때에만 실행되도록 설정합니다.

 

 

useEffect 주의점

useEffect는 모든 렌더링 이후에 실행되므로, 부작용이 발생할 수 있는 작업에서는 의존성 배열(Dependency Array)을 반드시 전달해야 합니다. 또한, useEffect 내부에서 setState 등의 상태 변경을 수행할 때에도 의존성 배열을 전달해야 합니다.

그렇지 않으면 무한 반복되는 렌더링이 발생할 수 있습니다.

 

 

useEffect... 언제 사용해야 할까?

1. 데이터 로딩 및 변경

외부 데이터를 가져오거나 변경된 데이터를 업데이트 할 때 useEffect를 사용할 수 있습니다.

예를 들어 API 요청을 통해 데이터를 가져오거나, 브라우저의 로컬 스토리지에 저장된 데이터를 업데이트 할 때 useEffect를 활용할 수 있습니다.

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

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

  useEffect(() => {
    // 데이터 로딩 및 업데이트 로직
    fetchData()
      .then(response => setData(response.data))
      .catch(error => console.error(error));
  }, []); // 빈 배열을 전달하여 컴포넌트가 처음 렌더링될 때만 실행되도록 설정

  // ...

  return (
    // 렌더링 로직
  );
};

 

 

2. 컴포넌트의 마운트 및 언마운트

컴포넌트가 마운트 될 때와 언마운트될 때 필요한 작업을 처리하기 위해 useEffect를 사용할 수 있습니다.

예를 들어, 이벤트 리스너를 등록하거나 해제하는 작업(clean-up)을 useEffect를 통해 처리할 수 있습니다.

import React, { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    // 컴포넌트 마운트 시 실행될 로직
    window.addEventListener('scroll', handleScroll);
    
    // 컴포넌트 언마운트 시 실행될 로직
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []); // 빈 배열을 전달하여 컴포넌트가 처음 마운트될 때만 실행되도록 설정

  // ...

  return (
    // 렌더링 로직
  );
};

 

3. 컴포넌트의 props 또는 state의 변경 감지

 props나 state가 변경될 때마다 특정 작업을 처리하기 위해 useEffect를 사용할 수 있습니다. 예를 들어, props가 변경될 때 컴포넌트를 업데이트하는 작업이 필요한 경우 useEffect를 사용할 수 있습니다. ( count 예제와 같음)

import React, { useEffect } from 'react';

const MyComponent = ({ propValue }) => {
  useEffect(() => {
    // propValue가 변경될 때마다 실행될 로직
    console.log('propValue 변경됨:', propValue);
  }, [propValue]); // propValue를 의존성 배열에 전달하여 propValue가 변경될 때만 실행되도록 설정

  // ...

  return (
    // 렌더링 로직
  )
}

 

 

 

✏️Reference

 

• https://react.dev/reference/react/useEffect

useEffect – React

• chatGPT