[React] 리액트 useEffect란?

리액트에서 useEffect는 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook입니다. React 컴포넌트가 렌더링 된 후 특정 코드를 실행하고, 컴포넌트가 언마운트되거나 상태가 변할 때 정리 작업(cleanup)을 할 수 있도록 도와줍니다. 

 

리액트 useEffect - 커버이미지

목차

1. useEffect 기본 개념

2. useEffect 사용 예시

3. 의존성 배열(Dependency Array)

4. 정리 작업(cleanup)

마무리

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

1. useEffect 기본 개념

useEffect는 컴포넌트가 렌더링된 후 특정 작업을 수행할 수 있도록 해줍니다. React 컴포넌트는 렌더링 될 때마다 DOM에 대한 변화가 일어나기 때문에, useEffect를 통해 필요한 작업(데이터 로드, 구독 설정 등)을 처리할 수 있습니다.

// 기본 사용법
useEffect(() => {
  // 이곳에 사이드 이펙트를 처리하는 코드 작성
});

 

useEffect는 렌더링 후에 실행됩니다. 이는 React의 비동기적 렌더링을 방해하지 않고, 렌더링이 완료된 후 DOM이 실제로 업데이트된 상태에서 코드를 실행할 수 있도록 하기 위함입니다. 만약 렌더링 전에 실행해야 할 코드가 있다면 useLayoutEffect를 사용할 수 있습니다.

 

추가로 컴포넌트 내에서 여러 개의 useEffect를 사용할 수 있습니다. 각각의 useEffect는 독립적으로 작동하며, 순서와 무관하게 실행됩니다. 첫 번째 useEffect는 컴포넌트가 마운트될 때 한 번만 실행되고, 두 번째 useEffect는 count 값이 변경될 때마다 실행됩니다.

useEffect(() => {
  console.log('컴포넌트가 마운트되었습니다.');
}, []);

useEffect(() => {
  console.log('count 값이 변경되었습니다.');
}, [count]);

 

 

2. useEffect 사용 예시

다음은 API 호출을 통해 데이터를 가져오고, 그 데이터를 화면에 표시하는 간단한 예시입니다.

import { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []); // 빈 배열: 처음 렌더링 시 한 번만 실행

  return <div>{data ? <p>{data.id}</p> : <p>Loading...</p>}</div>;
}

export default App;

 

위 코드는 컴포넌트가 처음 렌더링될 때만 데이터를 가져옵니다. 두 번째 인자로 빈 배열([])을 전달하여 useEffect가 한 번만 실행 되도록 했습니다.

 

3. 의존성 배열(Dependency Array)

useEffect는 두 번째 인자로 의존성 배열을 받을 수 있습니다. 배열에 넣은 값이 변경될 때만 useEffect가 실행됩니다. 이를 통해 필요한 시점에만 사이드 이펙트가 발생하도록 제어할 수 있습니다.

import { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState(null);
  const [dataId, setDataId] = useState(1);

  useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/todos/${dataId}`)
      .then((response) => response.json())
      .then((data) => setData(data));
  }, [dataId]); // 의존성 배열 : dataId 값이 변경될 때만 실행

  return (
    <>
      <button onClick={() => setDataId(dataId + 1)}>next</button>
      <div>{data ? <p>{data.id}</p> : <p>Loading...</p>}</div>
    </>
  );
}

export default App;

 

위 예시를 실행해 보면 next 버튼을 클릭해 dataId 값이 증가할 때만 사이드 이펙트가 발생하는 것을 확인할 수 있습니다.

 

4. 정리 작업(cleanup)

useEffect는 컴포넌트가 언마운트되거나, 의존성 배열의 값이 변경될 때 정리 작업(cleanup)을 수행할 수 있습니다. 이 기능은 이벤트 리스너를 제거하거나, 타이머를 정리하는 데 유용합니다.

useEffect(() => {
  const timer = setTimeout(() => {
    console.log('타이머 완료');
  }, 1000);

  return () => {
    clearTimeout(timer); // 컴포넌트가 언마운트되거나 의존성이 변경될 때 타이머 정리
  };
}, []);

 

컴포넌트가 언마운트 될 때만 cleanup 함수를 실행하고 싶다면 두 번째 인자로 빈 배열([])을 넣고, 특정 값이 변경될 때 cleanup 함수를 실행하고 싶다면 두 번째 인자로 검사하고 싶은 특정 값을 넣어주면 됩니다.

 

 

 

 

리액트의 useEffect Hook은 컴포넌트의 라이프사이클을 관리하고, 사이드 이펙트를 처리하는 데 필수적인 역할을 합니다. 데이터를 가져오거나, 이벤트 리스너를 등록하거나, 정리 작업을 할 때 매우 유용합니다. 의존성 배열을 올바르게 설정하면 성능 최적화까지 쉽게 할 수 있습니다.

useEffect를 잘 활용하면 동적인 React 애플리케이션을 효율적으로 개발할 수 있습니다😄

 

 

추천글

2024.09.30 - [개발 공부 일지/React] - [React] 리액트 State와 useState

[React] 리액트 State와 useState

2024.09.28 - [개발 공부 일지/React] - [React] 리액트 컴포넌트란?

[React] 리액트 컴포넌트란?