[REACT] useEffect로 알아보기

⚛️ useEffect란?

useEffect는 React 함수형 컴포넌트에서 부수효과(Side Effect) 를 처리하기 위한 훅(Hook)입니다.
예를 들어 다음과 같은 동작이 모두 “부수효과”에 해당해요 👇

• 📡 API 호출 (데이터 가져오기)
• ⏱️ 타이머/인터벌 설정
• 📦 로컬스토리지 접근
• 📍 DOM 직접 조작
• 🧹 구독 해제나 리소스 정리(cleanup)

즉, 렌더링만으로는 해결되지 않는 외부 동작을 처리할 때 useEffect를 사용합니다.

useEffect(() => {
  // 이 안에서 부수효과 실행
  return () => {
    // (선택) cleanup: 컴포넌트가 사라질 때 실행
  };
}, [dependency]);

 

• 첫 번째 인자: 실행할 함수
• return 부분: cleanup (선택 사항)
• 두 번째 인자 []: 의존성 배열 → 언제 실행할지 제어

📌 예제 1 – 컴포넌트가 처음 렌더링될 때 1회 실행

 

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

function Welcome() {
  const [message, setMessage] = useState("로딩 중...");

  useEffect(() => {
    // ✅ 마운트 시 한 번만 실행
    setTimeout(() => {
      setMessage("안녕하세요! 👋");
    }, 1500);
  }, []); // ← 의존성 배열이 빈 배열이면 '처음 한 번만'

  return <h2>{message}</h2>;
}

export default Welcome;

📍 동작

• 컴포넌트가 처음 렌더링될 때만 setTimeout() 실행
• 1.5초 후 메시지가 업데이트되고 화면이 다시 렌더링됨

📌 예제 2 – 상태 변화마다 실행

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

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

  useEffect(() => {
    console.log(`📢 카운트가 ${count}로 변경됨`);
  }, [count]); // count가 바뀔 때마다 실행됨

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

export default Counter;

📍 동작

• count 상태가 변경될 때마다 useEffect 안의 함수 실행
• 콘솔에 새로운 값 로그 출력

---

📌 예제 3 – 타이머 사용 + 정리(cleanup)

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

function Timer() {
  const [sec, setSec] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setSec(s => s + 1), 1000);
    console.log("⏱️ 타이머 시작");

    // ✅ cleanup: 컴포넌트가 사라질 때 실행
    return () => {
      clearInterval(id);
      console.log("🧹 타이머 정리 완료");
    };
  }, []); // 마운트 시 1회 실행

  return <h2>⏱️ {sec}초 경과</h2>;
}

export default Timer; 

📍 동작

• 컴포넌트가 처음 나타날 때 setInterval 시작
• 1초마다 sec 상태 증가 → UI 자동 갱신
• 컴포넌트가 사라질 때 clearInterval()로 메모리 누수 방지

---

✅ 정리

옵션설명실행 시점

useEffect(() => {...}, [])	마운트 시 1회만 실행	최초 렌더링
useEffect(() => {...}, [state])	특정 상태/props가 바뀔 때 실행	의존성 변경 시
return () => {...}	정리(cleanup) 함수	언마운트 또는 재실행 전