⚛️ React useEffect 기초 정리

---

✅ 1. 정의

• useEffect는 React의 Hooks 중 하나로, 컴포넌트의 특정 시점에 함수가 실행되도록 설정할 수 있습니다.
• 함수형 컴포넌트에서 side effect(부수 효과)를 처리하기 위해 사용됩니다.

---

✅ 2. 실행 시점 (LifeCycle 대응)

시점	설명
Mount	컴포넌트가 처음 생성될 때 (최초 실행)
Update	상태(state)나 props가 변경되어 컴포넌트가 재렌더링될 때
Unmount	컴포넌트가 화면에서 제거될 때 (종료 시점)

---

✅ 3. 사용법

📌 기본 구조

// useEffect Import
import { useEffect } from "react";

useEffect( () => { 실행코드 } );

📌 의존성 배열 사용

useEffect( () => { 실행코드 }, [의존성 배열]);

• [] → 의존성 배열이 비어 있으면 최초 1회만 실행
• [count] → count가 변경될 때마다 실행

---

✅ 4. 예제 코드

import { useEffect, useState } from "react";

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

    // [3.1] 컴포넌트가 생성되거나 재렌더링될 때마다 실행
    useEffect(() => {
        console.log("[3.1] 컴포넌트 생성 + 업데이트");
    });

    // [3.2] count가 변경될 때만 실행
    useEffect(() => {
        console.log("[3.2] count 변경 시 실행");
    }, [count]);

    // [3.3] 최초 1회만 실행
    useEffect(() => {
        console.log("[3.3] 최초 1회 실행");
    }, []);

    return (
        <>
            <div>
                <div>버튼 1 클릭 수: {count}</div>
                <button onClick={() => setCount(count + 1)}>버튼 1</button>
                {/* 버튼 1 클릭 시:
                    - [3.1] 항상 실행
                    - [3.2] count 변경 시 실행
                    - [3.3] 최초 1회만 실행 */}
            </div>

            <div>
                <div>버튼 2 클릭 수: {count2}</div>
                <button onClick={() => setCount2(count2 + 1)}>버튼 2</button>
                {/* 버튼 2 클릭 시:
                    - [3.1] 항상 실행
                    - [3.2] 영향 없음
                    - [3.3] 최초 1회만 실행 */}
            </div>
        </>
    );
}

---

✅ 5. 주요 사용 사례

• API 호출 (fetch)
• DOM 직접 조작
• 타이머 설정 (setTimeout, setInterval)
• 이벤트 구독 및 해제
• 외부 라이브러리 초기화

---

✅ 6. 주의사항

• useEffect는 컴포넌트 내부 최상단에서 호출해야 함
• useEffect 내에서 비동기 함수 직접 사용 불가 → 내부에 async 함수 선언 후 호출

useEffect(() => {
    const fetchData = async () => {
        const res = await fetch("url");
        const data = await res.json();
        console.log(data);
    };
    fetchData();
}, []);