훅 상태 경계

훅 상태 범위와 타입 표현

초기값, 의존성, Provider 위치, DOM 참조 가능성을 먼저 정하면 컴포넌트 사용처가 단순해집니다.

훅별 설계 질문

useState

초기값만으로 부족하면 상태가 가질 수 있는 전체 범위를 제네릭에 담습니다.

User | null

useEffect

비동기 요청, 오류 상태, 정리 함수가 의존성 배열과 함께 움직입니다.

() => void

useContext

Provider 누락 가능성은 커스텀 훅에서 한 번 검사해 호출부를 가볍게 만듭니다.

guard 집중

useRef

DOM 참조는 처음에 비어 있으므로 current 접근 전 확인 지점을 둡니다.

HTMLInputElement | null

custom hook

반복되는 상태 조작과 guard를 묶어 컴포넌트에는 count, actions 같은 좁은 반환 API만 노출합니다.

count, actions
초기값 → 가능 범위 → guard → 반환 API → 컴포넌트