[React] useEffect란?

🔥useEffect 완전 정복!🔥

React에서 useEffect는 컴포넌트의 생명주기를 다룰 때 사용하는 Hook임
예를 들어, 컴포넌트가 렌더링 될 때 데이터 가져오기, DOM 업데이트 같은 부수효과(side effect)를 실행할 때 사용됨

useEffect는 언제 쓰나요?

1️⃣ 컴포넌트가 처음 렌더링될 때 실행 (exAPI에서 데이터 가져오기)
2️⃣ 특정 값이 변경될 때 실행 (ex state나 props가 변경될 때 반응)
3️⃣ 컴포넌트가 사라질 때 정리(clean-up) 작업 수행 (ex 이벤트 리스너 제거, 타이머 제거)

useEffect 기본 문법

import { useEffect } from "react";

useEffect(() => {
  // 여기에 실행할 코드 작성
});

✔️ 이렇게만 작성하면?
=> 렌더링될 때마다 실행됨 (원하지 않는 불필요한 실행이 생길 수도 있음!)

useEffect 실행 시점 컨트롤하기

1️⃣ 마운트(처음 렌더링) 시 한 번만 실행

useEffect(() => {
  console.log("컴포넌트가 처음 렌더링됨!");
}, []);

✔️ [](의존성 배열)이 비어 있으면 한 번만 실행됨
✔️ 컴포넌트가 처음 나타날 때만 실행하고, 이 후에는 실행되지 않음

2️⃣ 특정 값이 변경될 때 실행

useEffect(()=>{
    console.log(`count 값이 변경됨:', ${count}`);
}, [count]);

✔️ count 값이 변경될 때마다 useEffect가 실행됨
✔️ count 가 변경되지 않으면 실행되지 않음

3️⃣ 언마운트 시(컴포넌트가 사라질 때) 정리(clean-up)

import { useEffect } from "react";

useEffect(() => {
  const interval = setInterval(() => {
    console.log("1초마다 실행 중...");
  }, 1000);

  return () => {
    clearInterval(interval);
    console.log("타이머가 제거됨!");
  };
}, []);

✔️ return 안에 있는 함수는 컴포넌트가 사라질 때 실행됨
✔️ 주로 이벤트 리스너 제거, 타이머 정리, 웹소켓 연결 종료 등에 사용됨

---

실전 예제!

1️⃣ API 데이터 가져오기 (처음 렌더링 시 한 번만 실행)

import { useEffect, useState } from "react";

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

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then((response) => response.json())
      .then((json) => setData(json));
  }, []);

  return <div>{data ? JSON.stringify(data) : "로딩 중..."}</div>;
};

2️⃣ 윈도우 크기 변경 감지 (특정 값 변경 시 실행)

import { useEffect, useState } from "react";

const App = () => {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);

    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  return <div>현재 창 너비: {width}px</div>;
};

✔️ window.addEventListener 추가
✔️ 컴포넌트가 사라질 때 removeEventListener로 정리(clean-up)

---

✅ 정리

• useEffect(() => {...}) : 매 렌더링마다 실행
• useEffect(() => {...}, []) : 처음 한 번만 실행 (마운트 시)
• useEffect(() => {...}, [변수]) : 특정 겂아 변경될 때 실행
• useEffect(() => { return () => {...}}, []) : 언마운트 시 정리 작업 수행

‼️useEffect 사용 시 주의할 점
1. 의존성 배열을 정확하게 설정해야 함

• 의존성 배열을 실수로 빠뜨리면 원치 않는 반복 실행이 발생할 수 있음

2. 클린업 함수(return)를 잘 활용해야 함

• 이벤트 리스너, 타이머 등을 정리하지 않으면 메모리 누수 발생 가능

3. 불필요한 렌더링을 방지해야 함

• useEffect 내에서 상태(state)를 변경하면 무한 루프가 발생할 수 있음