useEffect — 부수 효과와 생명주기 처리

import { useEffect, useState } from "react";

function UserProfile({ userId }: { userId: number }) {
    const [user, setUser] = useState<User | null>(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        // userId가 바뀔 때마다 실행
        async function fetchUser() {
            setLoading(true);
            const response = await fetch(`/api/users/${userId}`);
            const data = await response.json();
            setUser(data);
            setLoading(false);
        }

        fetchUser();
    }, [userId]);  // 의존성 배열

    if (loading) return <div>로딩 중...</div>;
    if (!user) return <div>사용자 없음</div>;
    return <div>{user.name}</div>;
}

// 마운트 시 1번만 (componentDidMount)
useEffect(() => {
    initializeSomething();
}, []);

// count가 바뀔 때마다
useEffect(() => {
    document.title = `카운트: ${count}`;
}, [count]);

// 매 렌더링마다 (보통 의도하지 않음)
useEffect(() => {
    console.log("렌더링됨");
});

function Timer() {
    const [seconds, setSeconds] = useState(0);

    useEffect(() => {
        const interval = setInterval(() => {
            setSeconds(prev => prev + 1);
        }, 1000);

        // 클린업: 컴포넌트 언마운트 시 실행
        return () => clearInterval(interval);
    }, []);

    return <div>경과: {seconds}초</div>;
}

// 이벤트 리스너 클린업
useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
}, []);

interface FetchState<T> {
    data: T | null;
    loading: boolean;
    error: Error | null;
}

function useApi<T>(url: string) {
    const [state, setState] = useState<FetchState<T>>({
        data: null,
        loading: true,
        error: null,
    });

    useEffect(() => {
        let cancelled = false;  // 경쟁 조건 방지

        setState({ data: null, loading: true, error: null });

        fetch(url)
            .then(r => r.json())
            .then(data => {
                if (!cancelled) setState({ data, loading: false, error: null });
            })
            .catch(error => {
                if (!cancelled) setState({ data: null, loading: false, error });
            });

        return () => { cancelled = true; };
    }, [url]);

    return state;
}

// 사용
function UserList() {
    const { data: users, loading, error } = useApi<User[]>("/api/users");

    if (loading) return <div>로딩 중...</div>;
    if (error) return <div>오류: {error.message}</div>;
    return <ul>{users?.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

// ❌ 무한 루프: 매 렌더링마다 객체 생성 → effect 재실행
useEffect(() => {
    fetchData(options);
}, [options]);  // options = { page: 1 } (매번 새 객체)

// ✅ 원시값을 의존성으로
useEffect(() => {
    fetchData({ page });
}, [page]);

// ❌ effect 안에서 async 직접 사용 불가
useEffect(async () => { ... });  // 반환값이 함수여야 함

// ✅ 내부에서 async 함수 정의
useEffect(() => {
    async function load() { ... }
    load();
}, []);