React

[React] useEffectf란?

yo09 2025. 1. 9. 12:13

📌 useEffect란?

useEffect는 React에서 side effects를 처리하기 위한 훅(Hook)입니다. 컴포넌트가 렌더링될 때 또는 특정 상태(state)가 변경될 때 실행되는 코드(예: 데이터 가져오기, DOM 업데이트 등)를 관리하는 데 사용됩니다.

  • React가 무언가를 할 때 실행해야 하는 코드가 있다면 useEffect를 사용한다.

📌 useEffect의 기본 문법

useEffect(() => {
  // 실행할 코드
}, [dependency]);
  • 첫 번째 인수: 효과 함수입니다. 여기에서 실행할 코드를 작성합니다.
  • 두 번째 인수: 의존성 배열입니다. 이 배열에 지정한 값이 변경될 때만 효과 함수가 실행됩니다.
    • 의존성 배열이 없다면: 컴포넌트가 매번 렌더링될 때 실행됩니다.
    • 빈 배열([]): 컴포넌트가 처음 마운트될 때만 실행됩니다.

📌 주요 개념

  1. 마운트(Mount):
    • 컴포넌트가 처음 화면에 나타날 때를 의미합니다.
    • 예를 들어, 페이지에 <div>Hello, World!</div>가 처음 렌더링되는 시점입니다.
  2. 언마운트(Unmount):
    • 컴포넌트가 화면에서 사라질 때를 의미합니다.
    • 예를 들어, 컴포넌트를 조건부 렌더링으로 감쌌다가({isVisible && <Example />}) isVisible 값을 false로 변경하면 컴포넌트가 언마운트됩니다.

📌 useEffect를 이해하기 위한 예제

1️⃣ 기본 예제 (컴포넌트가 렌더링될 때 실행)

import { useEffect } from "react";

export default function Example() {
  useEffect(() => {
    console.log("컴포넌트가 렌더링되었습니다!");
  });

  return <div>Hello, World!</div>;
}

동작

  • useEffect 안의 코드가 컴포넌트가 렌더링될 때마다 실행됩니다.
  • 즉, 컴포넌트가 화면에 그려질 때와 상태가 변경될 때마다 console.log가 호출됩니다.

2️⃣ 한 번만 실행 (마운트될 때 실행)

컴포넌트가 처음 화면에 나타날 때만 실행하고 싶다면 빈 배열([])을 전달합니다.

import { useEffect } from "react";

export default function Example() {
  useEffect(() => {
    console.log("컴포넌트가 처음 마운트되었습니다!");
  }, []); // 빈 배열

  return <div>Hello, World!</div>;
}

동작

  • useEffect 안의 코드가 컴포넌트가 처음 화면에 나타날 때 딱 한 번만 실행됩니다.

3️⃣ 상태나 props 변경 시 실행

useEffect를 특정 상태(state)나 props가 변경될 때만 실행되게 설정할 수 있습니다.

import { useState, useEffect } from "react";

export default function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`count가 ${count}로 변경되었습니다.`);
  }, [count]); // count가 변경될 때만 실행

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

동작

  • useEffect는 count가 변경될 때만 실행됩니다.
  • 버튼을 클릭할 때마다 count가 증가하며, 그에 따라 콘솔 메시지가 출력됩니다.

4️⃣ 정리(clean-up) 작업

컴포넌트가 사라지거나(언마운트) 의존성 값이 변경되기 전에 실행되는 정리 작업을 추가할 수 있습니다.

import { useEffect } from "react";

export default function Example() {
  // useEffect 정의
  useEffect(() => {
    // 컴포넌트가 마운트될 때 실행
    console.log("컴포넌트가 마운트되었습니다!");

    // 정리(clean-up) 함수
    return () => {
      console.log("컴포넌트가 언마운트됩니다!");
    };
  }, []); // 빈 배열: 한 번만 실행됨

  // 컴포넌트가 렌더링하는 부분
  return <div>Hello, World!</div>;
}

동작

  1. 컴포넌트가 화면에 나타날 때 console.log("컴포넌트가 마운트되었습니다!") 실행.
  2. 컴포넌트가 화면에서 사라질 때 console.log("컴포넌트가 언마운트됩니다!") 실행.

5️⃣ 정리 작업이 필요한 경우: 이벤트 구독

윈도우 크기 변경 이벤트를 처리하는 코드

import { useState, useEffect } from "react";

export default function Example() {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  const handleResize = () => {
    setWindowWidth(window.innerWidth);
  };

  useEffect(() => {
    window.addEventListener("resize", handleResize); // 이벤트 리스너 추가
    console.log("이벤트 리스너가 추가되었습니다!");

    return () => {
      window.removeEventListener("resize", handleResize); // 이벤트 리스너 제거
      console.log("이벤트 리스너가 제거되었습니다!");
    };
  }, []); // 빈 배열 (한 번만 실행)

  return <div>Window Width: {windowWidth}</div>;
}

동작

  1. 컴포넌트가 처음 마운트될 때 resize 이벤트 리스너를 추가합니다.
  2. 윈도우 크기가 변경될 때마다 windowWidth 상태가 업데이트됩니다.
  3. 컴포넌트가 언마운트되면 resize 이벤트 리스너가 제거됩니다.

📌 useEffect의 사용 사례

  1. 데이터 가져오기 (API 호출)
import { useState, useEffect } from "react";

export default function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts/1")
      .then((response) => response.json())
      .then((json) => setData(json));
  }, []); // 빈 배열 (한 번만 실행)

  return (
    <div>
      {data ? <h1>{data.title}</h1> : <p>Loading...</p>}
    </div>
  );
}

 

 

2. 애니메이션 효과

import { useEffect } from "react";

export default function Example() {
  useEffect(() => {
    // setInterval을 사용해 1초마다 실행되는 코드 정의
    const interval = setInterval(() => {
      console.log("애니메이션 실행 중...");
    }, 1000); // 1000ms (1초)마다 실행

    // 컴포넌트가 언마운트될 때 인터벌 정리
    return () => clearInterval(interval);
  }, []); // 빈 배열: 컴포넌트가 처음 마운트될 때만 실행

  return <div>애니메이션 시작!</div>;
}