훅 타입 설계

훅 타입 설계

useState, useEffect, useContext, useRef, 사용자 정의 훅은 서로 다른 상태 경계를 만들며 TypeScript가 그 경계를 추적합니다.

훅별 판단 포인트

useState

초기값만으로 부족하면 제네릭으로 상태의 전체 범위를 선언합니다.

User | null

useEffect

비동기 값, 오류 상태, 클린업 함수가 의존성 배열과 함께 읽힙니다.

() => void

useContext

undefined를 허용한 뒤 커스텀 훅 guard로 Provider 누락을 막습니다.

ContextType | undefined

useRef

DOM 참조는 처음에 null이므로 current 접근 전 좁히기가 필요합니다.

HTMLInputElement | null
초기값 → 가능 타입 → guard 위치 → 사용처 단순화