🪝 22. 커스텀 훅 설계 철학: 로직의 캡슐화와 합성

// ❌ PostList.tsx — 영철이의 복붙 1번
function PostList() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    fetchPosts()
      .then(data => {
        setPosts(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err);
        setLoading(false);
      });
  }, []);
 
  if (loading) return <Spinner />;
  if (error) return <ErrorMessage />;
  return <ul>{posts.map(p => <PostItem key={p.id} post={p} />)}</ul>;
}
 
// ❌ UserList.tsx — 복붙 2번 (loading 리셋을 finally로 안 쓴 것 주목)
function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);   // 🐛 버그 씨앗: loading 초기화 타이밍 다름
  const [error, setError] = useState(null);
 
  useEffect(() => {
    fetchUsers()
      .then(data => {
        setUsers(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err);
        // 💣 여기서 setLoading(false) 빠뜨림! → 에러나면 영원히 로딩 중 표시
      });
  }, []);
  // ...
}

// hooks/useAsync.ts
import { useState, useEffect } from 'react';
 
interface AsyncState<T> {
  data: T | null;
  loading: boolean;
  error: Error | null;
}
 
// T: 비동기 함수가 반환하는 데이터의 타입
function useAsync<T>(
  asyncFn: () => Promise<T>,  // 실행할 비동기 함수
  deps: React.DependencyList = []  // useEffect 의존성 배열
): AsyncState<T> {
  const [state, setState] = useState<AsyncState<T>>({
    data: null,
    loading: true,
    error: null,
  });
 
  useEffect(() => {
    let cancelled = false; // 언마운트 후 setState 호출 방지용 플래그
 
    // 매 실행마다 초기 상태로 리셋
    setState({ data: null, loading: true, error: null });
 
    asyncFn()
      .then(data => {
        if (!cancelled) {  // 언마운트됐으면 상태 업데이트 건너뜀
          setState({ data, loading: false, error: null });
        }
      })
      .catch(error => {
        if (!cancelled) {
          setState({ data: null, loading: false, error });
        }
      });
 
    return () => {
      cancelled = true; // 클린업: deps 변경 or 언마운트 시 이전 요청 취소
    };
  }, deps);
 
  return state;
}
 
export default useAsync;

// ✅ PostList.tsx — 이제 단 두 줄로 데이터 패칭 끝
function PostList() {
  const { data: posts, loading, error } = useAsync(fetchPosts, []);
 
  if (loading) return <Spinner />;
  if (error) return <ErrorMessage message={error.message} />;
 
  return <ul>{posts!.map(p => <PostItem key={p.id} post={p} />)}</ul>;
}
 
// ✅ UserList.tsx — 완전히 동일한 패턴, 버그 없음
function UserList() {
  const { data: users, loading, error } = useAsync(fetchUsers, []);
  // ...
}
 
// ✅ deps가 있는 경우: userId 바뀌면 자동 재요청
function UserProfile({ userId }: { userId: string }) {
  const { data: user, loading } = useAsync(
    () => fetchUser(userId),  // userId 클로저 캡처
    [userId]                  // userId 바뀌면 재실행
  );
}

// ❌ cancelled 플래그 없는 경우의 재앙
// userId=1 요청(느림) → userId=2 요청(빠름) → userId=2 결과 표시
//                                             → userId=1 결과 늦게 도착 → userId=1 덮어씀!
// 화면에는 userId=2인데 데이터는 userId=1 → 버그!
 
// ✅ cancelled 플래그가 있으면:
// userId=2 로 deps 변경 → 클린업 실행(cancelled=true)
// → userId=1 요청이 뒤늦게 완료돼도 setState 무시됨 → 안전!

// hooks/useLocalStorage.ts
import { useState } from 'react';
 
function useLocalStorage<T>(key: string, initialValue: T) {
  // 게으른 초기화(Lazy Init): 함수를 넘기면 초기 렌더링 때만 실행됨
  // → 매 렌더마다 localStorage를 읽지 않아도 됨 (성능 최적화)
  const [storedValue, setStoredValue] = useState<T>(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? (JSON.parse(item) as T) : initialValue;
    } catch {
      // localStorage 접근 불가(SSR, 프라이빗 모드) 시 초기값 사용
      return initialValue;
    }
  });
 
  // useState의 setter처럼 함수형 업데이트도 지원
  const setValue = (value: T | ((val: T) => T)) => {
    try {
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch {
      console.warn(`localStorage에 '${key}' 저장 실패`);
    }
  };
 
  return [storedValue, setValue] as const; // useState처럼 [값, setter] 배열 반환
}
 
export default useLocalStorage;

// ✅ 다크모드 설정 영구 저장
function ThemeToggle() {
  const [isDark, setIsDark] = useLocalStorage('theme', false);
  //    useState와 완전히 동일한 인터페이스!
 
  return (
    <button onClick={() => setIsDark(prev => !prev)}>
      {isDark ? '☀️ 라이트 모드' : '🌙 다크 모드'}
    </button>
  );
}
 
// ✅ 검색 히스토리 저장
function SearchHistory() {
  const [history, setHistory] = useLocalStorage<string[]>('search-history', []);
 
  const addSearch = (query: string) => {
    setHistory(prev => [query, ...prev.slice(0, 9)]); // 최대 10개 유지
  };
}

// ❌ 게으른 초기화 없이 (나쁜 예)
const [value, setValue] = useState(localStorage.getItem(key)); // 매 렌더마다 실행!
// → 컴포넌트가 1초에 60번 렌더되면 localStorage도 60번 읽음
 
// ✅ 게으른 초기화 사용 (좋은 예)
const [value, setValue] = useState(() => localStorage.getItem(key)); // 처음 한 번만 실행

// hooks/useDebounce.ts
import { useState, useEffect } from 'react';
 
function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);
 
  useEffect(() => {
    // delay 후에 값을 업데이트하는 타이머 설정
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);
 
    // 클린업: 새 value가 들어오면 이전 타이머 취소 → 사실상 타이머 리셋
    return () => clearTimeout(timer);
  }, [value, delay]);
 
  return debouncedValue; // delay가 지난 후에야 바뀌는 값
}
 
export default useDebounce;

// ✅ 실시간 검색 — 타이핑 멈추고 500ms 후 API 호출
function SearchBar() {
  const [query, setQuery] = useState('');
  const debouncedQuery = useDebounce(query, 500); // 실제 API 호출에 쓸 값
 
  // debouncedQuery가 바뀔 때만 API 호출 (타이핑 중엔 호출 안 함)
  const { data: results, loading } = useAsync(
    () => searchPosts(debouncedQuery),
    [debouncedQuery]
  );
 
  return (
    <div>
      <input
        value={query}
        onChange={e => setQuery(e.target.value)} // 즉시 반응 (UI는 빠르게)
        placeholder="게시글 검색..."
      />
      {loading && <Spinner />}
      {results?.map(post => <PostItem key={post.id} post={post} />)}
    </div>
  );
}

// hooks/useIntersectionObserver.ts
import { useEffect, useRef, useState } from 'react';
 
interface UseIntersectionObserverOptions {
  threshold?: number;   // 0~1: 요소가 얼마나 보여야 교차로 인식할지 (0.1 = 10%)
  rootMargin?: string;  // 뷰포트 여백 (ex: '0px 0px 100px' = 아래쪽 100px 미리 감지)
}
 
function useIntersectionObserver(options: UseIntersectionObserverOptions = {}) {
  const [isIntersecting, setIsIntersecting] = useState(false);
  const ref = useRef<HTMLDivElement>(null); // 감시할 DOM 요소에 붙일 ref
 
  useEffect(() => {
    const element = ref.current;
    if (!element) return;
 
    const observer = new IntersectionObserver(([entry]) => {
      setIsIntersecting(entry.isIntersecting); // 화면에 보이면 true
    }, options);
 
    observer.observe(element); // 감시 시작
 
    return () => observer.unobserve(element); // 클린업: 감시 해제
  }, []);
 
  return { ref, isIntersecting };
}
 
export default useIntersectionObserver;

// ✅ 게시글 무한 스크롤
function PostFeed() {
  const [page, setPage] = useState(1);
  const [allPosts, setAllPosts] = useState<Post[]>([]);
  const { ref: bottomRef, isIntersecting } = useIntersectionObserver({
    threshold: 0.1,       // 10%만 보여도 감지
    rootMargin: '0px 0px 200px', // 바닥 200px 전에 미리 감지 (부드러운 로딩)
  });
 
  const { data: newPosts, loading } = useAsync(
    () => fetchPosts({ page }),
    [page]
  );
 
  // 새 데이터 도착 시 기존 목록에 추가
  useEffect(() => {
    if (newPosts) {
      setAllPosts(prev => [...prev, ...newPosts]);
    }
  }, [newPosts]);
 
  // 하단 요소가 화면에 보이면 다음 페이지 로드
  useEffect(() => {
    if (isIntersecting && !loading) {
      setPage(prev => prev + 1);
    }
  }, [isIntersecting, loading]);
 
  return (
    <div>
      {allPosts.map(post => <PostItem key={post.id} post={post} />)}
      {loading && <Spinner />}
      <div ref={bottomRef} style={{ height: 1 }} /> {/* 감시 대상 (눈에 안 보임) */}
    </div>
  );
}

// 배열 반환: useState 스타일 — 이름을 자유롭게 바꿀 수 있음
const [theme, setTheme] = useLocalStorage('theme', 'dark');
const [query, setQuery] = useLocalStorage('query', '');
// 이름 충돌 없이 두 번 쓸 수 있다는 게 배열 반환의 강점

// 객체 반환: 이름이 고정됨, 필요한 것만 구조분해 가능
const { data, loading, error } = useAsync(fetchPosts);
const { data: user } = useAsync(() => fetchUser(id)); // 이름 충돌 시 별칭 사용

// ✅ 레이어별 훅 합성: 검색 기능 전체를 한 훅으로
function useSearch(initialQuery = '') {
  // Layer 1: 검색어 상태 (localStorage에 영구 저장)
  const [query, setQuery] = useLocalStorage('last-search', initialQuery);
 
  // Layer 2: 디바운스 적용 (타이핑 멈추고 300ms 후 실제 검색)
  const debouncedQuery = useDebounce(query, 300);
 
  // Layer 3: 실제 API 호출 (디바운스된 값으로)
  const { data: results, loading, error } = useAsync(
    () => debouncedQuery ? searchPosts(debouncedQuery) : Promise.resolve([]),
    [debouncedQuery]
  );
 
  return {
    query,        // 즉시 반응하는 입력값 (UI 표시용)
    setQuery,     // 검색어 변경
    results,      // 검색 결과
    loading,
    error,
  };
}
 
// 사용: 복잡한 로직이 한 줄로
function SearchPage() {
  const { query, setQuery, results, loading } = useSearch();
 
  return (
    <div>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      {loading ? <Spinner /> : results?.map(p => <PostItem key={p.id} post={p} />)}
    </div>
  );
}

// ❌ 잘못된 예: 훅이 JSX를 반환함
function useLoadingState(isLoading: boolean) {
  if (isLoading) {
    return <div className="spinner">Loading...</div>; // 훅이 JSX 반환 → 규칙 위반!
  }
  return null;
}
 
// ✅ 올바른 분리
// 1) 로직(상태)은 훅으로
function useLoadingState() {
  const [isLoading, setIsLoading] = useState(false);
  return { isLoading, setIsLoading };
}
 
// 2) UI는 컴포넌트로
function LoadingSpinner({ visible }: { visible: boolean }) {
  if (!visible) return null;
  return <div className="spinner">Loading...</div>;
}
 
// 3) 컴포넌트에서 조합
function MyPage() {
  const { isLoading } = useLoadingState();
  return <LoadingSpinner visible={isLoading} />;
}

// 💡 Render Prop 패턴 (구형, 훅 이전 시대)
<DataLoader render={data => <PostList data={data} />} />
 
// 💡 커스텀 훅 패턴 (현대적, 더 단순)
const { data } = useData();
return <PostList data={data} />;
// → 동일한 로직 재사용이지만 훅이 훨씬 읽기 쉬움

function MyComponent({ isLoggedIn }) {
  if (!isLoggedIn) return null; // ← 여기서 early return
  const { data } = useUserData(); // 💥 조건문 이후에 훅 호출 → 규칙 위반
}

// ✅ 훅을 조건문 이전에 호출, 조건 처리는 그 후에
function MyComponent({ isLoggedIn }) {
  const { data } = useUserData(); // 항상 호출
 
  if (!isLoggedIn) return null; // 그 다음에 조건 처리
  return <div>{data?.name}</div>;
}

useEffect(() => {
  fetchData().then(data => {
    setState(data); // 💥 이미 언마운트됐는데 setState 호출!
  });
}, []);

useEffect(() => {
  let cancelled = false;
  fetchData().then(data => {
    if (!cancelled) setState(data); // 언마운트 후면 건너뜀
  });
  return () => { cancelled = true; };
}, []);

const [value, setValue] = useState<T>(() => {
  if (typeof window === 'undefined') return initialValue; // SSR 환경 체크
  try {
    const item = window.localStorage.getItem(key);
    return item ? JSON.parse(item) : initialValue;
  } catch {
    return initialValue;
  }
});

function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);
 
  useEffect(() => {
    const timer = ________(() => {    // 1번 빈칸
      setDebouncedValue(value);
    }, delay);
 
    return () => __________(timer);   // 2번 빈칸 (클린업)
  }, [value, delay]);
 
  return debouncedValue;
}