Custom Hook 설계 원칙

// ❌ useState를 감싸기만 한 추상화 — 열어보면 useState 한 줄이 전부
function useModalOpen() {
  const [isOpen, setIsOpen] = useState(false);
  return [isOpen, setIsOpen] as const;
}
 
function ProductPage() {
  const [isModalOpen, setIsModalOpen] = useModalOpen();
  return <button onClick={() => setIsModalOpen(true)}>상세 보기</button>;
}

// ❌ useEffect(fn, [])을 감싸기만 한 추상화
function useMountEffect(effect: () => void) {
  // eslint-disable-next-line react-hooks/exhaustive-deps
  useEffect(effect, []);
}

// ✅ 이미 충분히 명확한 코드에는 추상화가 불필요
function ProductPage() {
  const [isModalOpen, setIsModalOpen] = useState(false);
 
  useEffect(() => {
    analytics.trackPageView("product");
  }, []);
  // ...
}

// ✅ 여러 컴포넌트에서 사용되고, 생명주기 관리가 필요한 로직
function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(
    () => window.matchMedia(query).matches
  );
 
  useEffect(() => {
    const mql = window.matchMedia(query);
    const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
    mql.addEventListener("change", handler);
    return () => mql.removeEventListener("change", handler);
  }, [query]);
 
  return matches;
}

// ❌ 매 렌더마다 새 객체 참조 생성
function usePagination(totalItems: number, pageSize: number) {
  const [page, setPage] = useState(1);
  const totalPages = Math.ceil(totalItems / pageSize);
 
  // 이 객체는 매 렌더마다 새로 생성됨
  return {
    page,
    setPage,
    totalPages,
    hasNext: page < totalPages,
    hasPrev: page > 1,
  };
}
 
// ✅ useMemo로 참조 안정성 확보
function usePagination(totalItems: number, pageSize: number) {
  const [page, setPage] = useState(1);
  const totalPages = Math.ceil(totalItems / pageSize);
 
  return useMemo(
    () => ({
      page,
      setPage,
      totalPages,
      hasNext: page < totalPages,
      hasPrev: page > 1,
    }),
    [page, totalPages]
  );
}

// ✅ 저장소 어댑터를 주입받아 환경에 유연하게 대응
interface StorageAdapter {
  getItem(key: string): string | null;
  setItem(key: string, value: string): void;
  removeItem(key: string): void;
}
 
function usePersistedState<T>(
  key: string,
  initialValue: T,
  storage: StorageAdapter = localStorage
) {
  const [value, setValue] = useState<T>(() => {
    const stored = storage.getItem(key);
    return stored ? (JSON.parse(stored) as T) : initialValue;
  });
 
  useEffect(() => {
    storage.setItem(key, JSON.stringify(value));
  }, [key, value, storage]);
 
  return [value, setValue] as const;
}

// ✅ 제약 제네릭으로 안전한 인터페이스 보장
function useSelection<T extends { id: string }>(items: T[]) {
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
 
  const toggle = useCallback((item: T) => {
    setSelectedIds(prev => {
      const next = new Set(prev);
      if (next.has(item.id)) {
        next.delete(item.id);
      } else {
        next.add(item.id);
      }
      return next;
    });
  }, []);
 
  const selectedItems = useMemo(
    () => items.filter(item => selectedIds.has(item.id)),
    [items, selectedIds]
  );
 
  return {
    selectedIds,
    selectedItems,
    toggle,
    selectAll: () => setSelectedIds(new Set(items.map(i => i.id))),
    clear: () => setSelectedIds(new Set()),
  };
}

// 사용 예시
const { selectedItems, toggle } = useSelection(products);
// products: Product[] 타입에서 T가 Product로 추론됨
 
// ❌ id 속성이 없는 타입은 컴파일 에러
const { toggle } = useSelection([{ name: "test" }]);
// Error: { name: string }은 { id: string }에 할당할 수 없음

// ❌ 에러를 무시하는 패턴 — 사용자에게 빈 화면, 개발자에게 단서 없음
useEffect(() => {
  fetchData(url)
    .then(setData)
    .catch(() => {}); // 에러가 어디론가 사라짐
}, [url]);

// ✅ 에러 상태를 명시적으로 관리하고 복구 수단을 제공
interface UseQueryReturn<T> {
  data: T | undefined;
  error: Error | null;
  isLoading: boolean;
  isError: boolean;
  retry: () => void;
}
 
function useQuery<T>(
  queryFn: () => Promise<T>
): UseQueryReturn<T> {
  const [data, setData] = useState<T | undefined>();
  const [error, setError] = useState<Error | null>(null);
  const [isLoading, setIsLoading] = useState(true);
 
  const execute = useCallback(async () => {
    setIsLoading(true);
    setError(null);
    try {
      const result = await queryFn();
      setData(result);
    } catch (err) {
      setError(err instanceof Error ? err : new Error(String(err)));
    } finally {
      setIsLoading(false);
    }
  }, [queryFn]);
 
  useEffect(() => {
    execute();
  }, [execute]);
 
  return {
    data,
    error,
    isLoading,
    isError: error !== null,
    retry: execute,
  };
}

// ✅ ref를 활용하여 항상 최신 콜백을 실행
function useInterval(callback: () => void, delay: number | null) {
  const savedCallback = useRef(callback);
 
  // 매 렌더마다 최신 콜백으로 갱신
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);
 
  useEffect(() => {
    if (delay === null) return;
 
    const id = setInterval(() => savedCallback.current(), delay);
    return () => clearInterval(id);
  }, [delay]);
}

// Primitive: 값의 변화를 지연시키는 범용 훅
function useDebounce<T>(value: T, delay: number): T {
  const [debounced, setDebounced] = useState(value);
 
  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);
 
  return debounced;
}
 
// Feature: Primitive + Domain 조합
function useDebouncedSearch(query: string) {
  const debouncedQuery = useDebounce(query, 300);
  const { data, isLoading, error } = useResource<SearchResult[]>({
    url: `/api/search?q=${encodeURIComponent(debouncedQuery)}`,
    enabled: debouncedQuery.length > 0,
  });
 
  return {
    results: data ?? [],
    isLoading,
    error,
    debouncedQuery,
  };
}

interface UseFormOptions<T extends Record<string, unknown>> {
  initialValues: T;
  validate?: (values: T) => Partial<Record<keyof T, string>>;
  onSubmit: (values: T) => Promise<void> | void;
}
 
interface UseFormReturn<T extends Record<string, unknown>> {
  values: T;
  errors: Partial<Record<keyof T, string>>;
  touched: Partial<Record<keyof T, boolean>>;
  isSubmitting: boolean;
  setFieldValue: <K extends keyof T>(field: K, value: T[K]) => void;
  setFieldTouched: (field: keyof T) => void;
  handleSubmit: (e?: React.FormEvent) => Promise<void>;
  reset: () => void;
}
 
function useForm<T extends Record<string, unknown>>({
  initialValues,
  validate,
  onSubmit,
}: UseFormOptions<T>): UseFormReturn<T> {
  const [values, setValues] = useState<T>(initialValues);
  const [errors, setErrors] = useState<Partial<Record<keyof T, string>>>({});
  const [touched, setTouched] = useState<Partial<Record<keyof T, boolean>>>({});
  const [isSubmitting, setIsSubmitting] = useState(false);
 
  const setFieldValue = useCallback(<K extends keyof T>(
    field: K,
    value: T[K]
  ) => {
    setValues(prev => ({ ...prev, [field]: value }));
    setErrors(prev => ({ ...prev, [field]: undefined }));
  }, []);
 
  const setFieldTouched = useCallback((field: keyof T) => {
    setTouched(prev => ({ ...prev, [field]: true }));
  }, []);
 
  const handleSubmit = useCallback(async (e?: React.FormEvent) => {
    e?.preventDefault();
 
    // 모든 필드를 touched 상태로 전환
    const allTouched = Object.keys(values).reduce(
      (acc, key) => ({ ...acc, [key]: true }),
      {} as Record<keyof T, boolean>
    );
    setTouched(allTouched);
 
    if (validate) {
      const validationErrors = validate(values);
      setErrors(validationErrors);
      const hasErrors = Object.values(validationErrors).some(Boolean);
      if (hasErrors) return;
    }
 
    setIsSubmitting(true);
    try {
      await onSubmit(values);
    } finally {
      setIsSubmitting(false);
    }
  }, [values, validate, onSubmit]);
 
  const reset = useCallback(() => {
    setValues(initialValues);
    setErrors({});
    setTouched({});
  }, [initialValues]);
 
  return {
    values, errors, touched, isSubmitting,
    setFieldValue, setFieldTouched, handleSubmit, reset,
  };
}

function SignUpForm() {
  const form = useForm({
    initialValues: { email: "", password: "", name: "" },
    validate: (values) => ({
      email: !values.email.includes("@")
        ? "올바른 이메일 형식이 아닙니다"
        : undefined,
      password: values.password.length < 8
        ? "8자 이상 입력해야 합니다"
        : undefined,
    }),
    onSubmit: async (values) => {
      await api.signUp(values);
    },
  });
 
  return (
    <form onSubmit={form.handleSubmit}>
      <input
        value={form.values.email}
        onChange={e => form.setFieldValue("email", e.target.value)}
        onBlur={() => form.setFieldTouched("email")}
      />
      {form.touched.email && form.errors.email && (
        <span>{form.errors.email}</span>
      )}
 
      <button type="submit" disabled={form.isSubmitting}>
        {form.isSubmitting ? "제출 중..." : "가입하기"}
      </button>
    </form>
  );
}

import { renderHook, act } from "@testing-library/react";
import { useForm } from "./useForm";
 
describe("useForm", () => {
  const defaultOptions = {
    initialValues: { email: "", password: "" },
    validate: (values: { email: string; password: string }) => ({
      email: !values.email ? "필수 항목입니다" : undefined,
      password: values.password.length < 8 ? "8자 이상" : undefined,
    }),
    onSubmit: vi.fn(),
  };
 
  test("초기값이 올바르게 설정된다", () => {
    const { result } = renderHook(() => useForm(defaultOptions));
 
    expect(result.current.values).toEqual({ email: "", password: "" });
    expect(result.current.errors).toEqual({});
    expect(result.current.isSubmitting).toBe(false);
  });
 
  test("setFieldValue로 필드 값을 변경하면 해당 에러가 초기화된다", () => {
    const { result } = renderHook(() => useForm(defaultOptions));
 
    act(() => result.current.setFieldValue("email", "user@test.com"));
 
    expect(result.current.values.email).toBe("user@test.com");
    expect(result.current.errors.email).toBeUndefined();
  });
 
  test("유효성 검증 실패 시 onSubmit이 호출되지 않는다", async () => {
    const { result } = renderHook(() => useForm(defaultOptions));
 
    await act(() => result.current.handleSubmit());
 
    expect(result.current.errors.email).toBe("필수 항목입니다");
    expect(defaultOptions.onSubmit).not.toHaveBeenCalled();
  });
});