04. Custom Hooks: 로직의 추상화와 재사용성
React
Hook
Abstraction
비즈니스 로직을 독립 선언하고, 7가지 실전 패턴으로 컴포넌트를 날렵하게 만들어라.
커스텀 훅(Custom Hooks)의 존재 이유: 비즈니스 로직의 독립 선언
무엇인가:
리액트 기본 훅들을 조합하여 특정 기능을 수행하도록 만든 사용자 정의 로직. use로 시작하는 이름 규칙을 따르며, 훅의 규칙이 동일하게 적용된다.
왜 쓰는가: UI와 로직을 분리하여 코드 가독성, 테스트 가능성, 재사용성을 극대화하기 위해. 컴포넌트는 '무엇을 보여줄 것인가'에만 집중하게 된다.
언제 쓰는가: 두 개 이상의 컴포넌트에서 상태 로직이 중복되거나 컴포넌트가 너무 비대해질 때. 단, 단일 컴포넌트에서만 쓰이는 로직 추출은 과설계(Over-engineering)일 수 있다.
1관문. Headless UI Pattern
UI 없이 토글 로직만 제공하는 useToggle 훅을 만들어 두 가지 다른 디자인에 적용하라.
2관문. useFetch with Cache
동일 URL 요청을 캐싱하여 중복 네트워크 호출을 방지하는 useFetch 훅을 구현하라.
3관문. useLocalStorage
상태 변경 시 localStorage와 자동 동기화되는 useLocalStorage 훅을 구현하라.
4관문. Hook Composition
useDebounce + useFetch를 조합하여 타이핑 중 자동완성 검색 기능을 구현하라.
5관문. Debounce & Throttle Hooks
useDebounce(값 지연)와 useThrottle(함수 제어)의 차이를 구현으로 체득하라.
6관문. useIsMounted
언마운트된 컴포넌트에서 setState를 호출하는 메모리 누수 경고를 useIsMounted로 방어하라.
7관문. Testing with RenderHook
renderHook과 act를 사용하여 useCounter 훅의 로직을 UI 없이 독립 검증하라.