---
category: Frontend
tags: [auto-wikified, technical-documentation, frontend]
title: Custom Hooks
description: "커스텀 훅(Custom Hooks)은 React 애플리케이션에서 상태 기반 로직을 추출하여 컴포넌트 간에 쉽게 공유할 수 있도록 고안된 함수형 디자인 패턴입니다 [1, 2]."
last_updated: 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*