4.3 KiB
4.3 KiB
category, tags, title, description, last_updated
| category | tags | title | description | last_updated | |||
|---|---|---|---|---|---|---|---|
| Frontend |
|
Custom Hooks | 커스텀 훅(Custom Hooks)은 React 애플리케이션에서 상태 기반 로직을 추출하여 컴포넌트 간에 쉽게 공유할 수 있도록 고안된 함수형 디자인 패턴입니다 [1, 2]. | 2026-05-04 |
Custom Hooks
📌 Brief Summary
커스텀 훅(Custom Hooks)은 React 애플리케이션에서 상태 기반 로직을 추출하여 컴포넌트 간에 쉽게 공유할 수 있도록 고안된 함수형 디자인 패턴입니다 [1, 2]. use로 시작하는 명명 규칙을 따르며, 내부에 다른 React 훅들을 호출하여 새로운 맞춤형 기능을 조립할 수 있습니다 [1, 3]. 기존의 고차 컴포넌트(HOC)나 렌더 프로프(Render Props)가 유발하던 불필요한 컴포넌트 중첩(Wrapper Hell)을 제거하고, 함수 합성을 통해 깔끔하게 로직을 재사용할 수 있게 해줍니다 [1, 4].
📖 Core Content
- 상태 기반 로직의 캡슐화 및 재사용: 커스텀 훅은 API 데이터 페칭, 폼 상태 관리, 반응형 디자인 등 UI 렌더링과 직접적인 관련이 없는 순수 비즈니스 및 상태 로직을 캡슐화하는 데 사용됩니다 [2, 5]. 이를 통해 여러 컴포넌트 사이에서 코드를 DRY(Don't Repeat Yourself)하게 유지하고 깔끔한 코드베이스를 작성할 수 있습니다 [5].
- 함수 합성(Function Composition)을 통한 확장:
복잡한 행위들을 단순한 형태의 훅으로 쪼개고 이를 다시 합성하여 강력한 기능을 구현할 수 있습니다 [1, 6]. 예를 들어, 디바운싱 로직을 다루는
useDebounce와 데이터를 가져오는useFetch, 검색 로직을 다루는useSearch를 각각 만들고, 이들을 하나의 훅에서 조합하여 효율적으로 관리할 수 있습니다 [1, 6]. - 타입스크립트(TypeScript)와의 시너지:
타입스크립트의 제네릭(Generics)을 커스텀 훅에 적용하면(
useFetch<T>등) 재사용성을 희생하지 않으면서도 강력한 타입 안전성(Type Safety)을 얻을 수 있습니다 [7]. 이는 엔터프라이즈 환경의 대규모 프로젝트에서 안전하고 견고한 코드를 구축하는 핵심 요소로 평가받습니다 [2, 8]. - 독립적인 테스트와 관심사 분리:
각 커스텀 훅은 하나의 책임만을 가지도록 집중적으로 설계해야 합니다 [3]. 추출된 훅은 특정 UI에 종속되지 않기 때문에
@testing-library/react의renderHook과 같은 도구를 사용하여 독립적이고 쉽게 테스트할 수 있습니다 [3, 8]. - 필수적인 설계 모범 사례(Best Practices):
훅을 작성할 때는 React 린팅 규칙이 의존하는
use접두사를 반드시 사용해야 합니다 [3]. 다운스트림의 메모이제이션이 깨지는 것을 막기 위해useCallback과useMemo를 이용해 반환되는 참조를 안정적으로 유지하는 것이 중요합니다 [3]. 또한 이벤트나 외부 자원을 구독할 때에는useEffect에서 항상 클린업(cleanup) 함수를 반환하여 누수를 방지해야 합니다 [3].
⚖️ Trade-offs & Caveats
- 엄격한 훅의 규칙(Rules of Hooks) 강제: 커스텀 훅을 사용할 때는 React의 훅 규칙을 반드시 준수해야 한다는 문법적, 구조적 제약이 따릅니다 [2, 9]. 이를 어길 경우 런타임 오류나 예상치 못한 상태 오류가 발생할 수 있습니다 [5].
- 오래된 클로저(Stale Closure) 문제:
useEffect등과 함께 커스텀 훅을 구현할 때, 참조되는 모든 값을 의존성 배열(dependency array)에 올바르게 명시하지 않으면 함수가 과거의 렌더링 변수 값에 갇히는 '오래된 클로저' 현상이 발생합니다 [7]. 변경 추적이 아닌 호출 시점에만 읽혀야 하는 값들은ref를 사용해 우회해야 합니다 [7]. - 성능 최적화 오용(Vibe Coding)의 함정:
성능을 개선한다는 맹목적인 믿음 하에 객관적인 성능 측정 없이
useCallback이나useMemo등을 무분별하게 추가하면 오히려 디버깅을 어렵게 만들고, 컴포넌트의 성능을 악화시키는 부작용을 초래할 수 있습니다 [10, 11].
Last updated: 2026-05-03