React

// React Hooks를 활용한 함수형 컴포넌트
import { useState, useEffect, useCallback, useMemo } from 'react';

interface User {
    id: number;
    name: string;
    email: string;
}

interface UserListProps {
    filterRole?: string;
}

export function UserList({ filterRole }: UserListProps) {
    // 상태 관리
    const [users, setUsers] = useState<User[]>([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);
    const [searchTerm, setSearchTerm] = useState('');

    // 데이터 페칭 - useEffect
    useEffect(() => {
        const controller = new AbortController();

        async function fetchUsers() {
            try {
                setLoading(true);
                const response = await fetch('/api/users', {
                    signal: controller.signal
                });

                if (!response.ok) throw new Error('Failed to fetch');

                const data = await response.json();
                setUsers(data);
            } catch (err) {
                if (err instanceof Error && err.name !== 'AbortError') {
                    setError(err.message);
                }
            } finally {
                setLoading(false);
            }
        }

        fetchUsers();

        // Cleanup function - 컴포넌트 언마운트 시 요청 취소
        return () => controller.abort();
    }, [filterRole]); // filterRole이 변경되면 다시 실행

    // 메모이제이션 - useMemo (비용이 큰 계산)
    const filteredUsers = useMemo(() => {
        return users.filter(user =>
            user.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
            user.email.toLowerCase().includes(searchTerm.toLowerCase())
        );
    }, [users, searchTerm]);

    // 콜백 메모이제이션 - useCallback (자식에게 전달하는 함수)
    const handleDelete = useCallback(async (userId: number) => {
        if (!confirm('정말 삭제하시겠습니까?')) return;

        await fetch(`/api/users/${userId}`, { method: 'DELETE' });
        setUsers(prev => prev.filter(u => u.id !== userId));
    }, []);

    // 조건부 렌더링
    if (loading) return <div className="loading">로딩 중...</div>;
    if (error) return <div className="error">에러: {error}</div>;

    return (
        <div className="user-list">
            <input
                type="search"
                placeholder="사용자 검색..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
            />

            <ul>
                {filteredUsers.map(user => (
                    <UserItem
                        key={user.id}
                        user={user}
                        onDelete={handleDelete}
                    />
                ))}
            </ul>

            {filteredUsers.length === 0 && (
                <p>검색 결과가 없습니다.</p>
            )}
        </div>
    );
}

// 자식 컴포넌트 - React.memo로 불필요한 리렌더링 방지
const UserItem = React.memo(function UserItem({
    user,
    onDelete
}: {
    user: User;
    onDelete: (id: number) => void;
}) {
    return (
        <li className="user-item">
            <span>{user.name}</span>
            <span>{user.email}</span>
            <button onClick={() => onDelete(user.id)}>삭제</button>
        </li>
    );
});

// 재사용 가능한 Custom Hook
import { useState, useEffect, useRef } from 'react';

// 데이터 페칭 Hook
function useFetch<T>(url: string) {
    const [data, setData] = useState<T | null>(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<Error | null>(null);

    useEffect(() => {
        const controller = new AbortController();

        fetch(url, { signal: controller.signal })
            .then(res => {
                if (!res.ok) throw new Error(`HTTP ${res.status}`);
                return res.json();
            })
            .then(setData)
            .catch(err => {
                if (err.name !== 'AbortError') setError(err);
            })
            .finally(() => setLoading(false));

        return () => controller.abort();
    }, [url]);

    return { data, loading, error };
}

// 로컬 스토리지 동기화 Hook
function useLocalStorage<T>(key: string, initialValue: T) {
    const [storedValue, setStoredValue] = useState<T>(() => {
        if (typeof window === 'undefined') return initialValue;

        try {
            const item = localStorage.getItem(key);
            return item ? JSON.parse(item) : initialValue;
        } catch {
            return initialValue;
        }
    });

    const setValue = (value: T | ((val: T) => T)) => {
        const valueToStore = value instanceof Function ? value(storedValue) : value;
        setStoredValue(valueToStore);
        localStorage.setItem(key, JSON.stringify(valueToStore));
    };

    return [storedValue, setValue] as const;
}

// 디바운스 Hook
function useDebounce<T>(value: T, delay: number): T {
    const [debouncedValue, setDebouncedValue] = useState(value);

    useEffect(() => {
        const timer = setTimeout(() => setDebouncedValue(value), delay);
        return () => clearTimeout(timer);
    }, [value, delay]);

    return debouncedValue;
}

// 사용 예시
function SearchComponent() {
    const [query, setQuery] = useState('');
    const debouncedQuery = useDebounce(query, 300);
    const [history, setHistory] = useLocalStorage<string[]>('search-history', []);

    const { data, loading } = useFetch<SearchResult[]>(
        debouncedQuery ? `/api/search?q=${debouncedQuery}` : null
    );

    return (
        <div>
            <input
                value={query}
                onChange={e => setQuery(e.target.value)}
                placeholder="검색어 입력"
            />
            {loading ? <p>검색 중...</p> : (
                <ul>
                    {data?.map(item => <li key={item.id}>{item.title}</li>)}
                </ul>
            )}
        </div>
    );
}