# [[Custom Hooks]]

## 📌 Brief 시
Custom Hooks는 React 애플리케이션에서 반복되는 로직을 추출하여 재사용성과 모듈성을 높이는 핵심적인 리팩토링 단위입니다 [1]. 주로 데이터 패칭, 폼 처리, 전역 상태 구독과 같은 공통 로직을 캡슐화하는 데 사용되며, 비즈니스 로직을 UI와 격리시켜 독립적이고 빠른 단위 테스트를 가능하게 합니다 [1]. 스케일러블한 프로젝트 구조에서는 별도의 디렉토리에 관리되며, 일관된 명명 규칙을 통해 코드베이스의 가독성과 유지보수성을 크게 향상시킵니다 [2-4].

## 📖 Core Content

*   **리팩토링 및 모듈성 향상:**
    최신 React 개발에서 Custom Hook은 리팩토링의 주요 단위로 작용합니다 [1]. 거대한 컴포넌트 내부에 있는 복잡한 데이터 패칭이나 폼 처리 로직을 `useFetch`, `useForm`과 같은 Custom Hook으로 추출하면, 비즈니스 로직이 UI 컴포넌트로부터 완전히 분리됩니다 [1]. 이러한 격리는 느린 통합 테스트에 의존하는 대신 빠르고 고립된 단위 테스트를 가능하게 하여 코드의 모듈성과 테스트 용이성을 극대화합니다 [1].
*   **DRY(Don't Repeat Yourself) 원칙의 실천:**
    동일한 코드를 반복하지 말라는 DRY 원칙을 React 컴포넌트에 적용하는 가장 대표적인 방법이 바로 재사용 가능한 로직을 Custom Hook이나 고차 컴포넌트(HOC)로 추출하는 것입니다 [5, 6]. 또한, 복잡한 상태 관리를 위해 단순히 `useState`를 남용하기보다는 `useReducer`나 Custom Hook을 활용하여 상태 관리 로직을 깔끔하게 유지하는 것이 권장됩니다 [7].
*   **폴더 구조 (Folder Structure) 모범 사례:**
    확장 가능한 애플리케이션 아키텍처에서 Custom Hook은 주로 `src/hooks/` 폴더 내에 중앙 집중화되어 배치됩니다 [2, 4]. 이 폴더에는 `useAuth`, `useLocalStorage`, `useWindowSize`와 같이 여러 컴포넌트와 도메인에 걸쳐 재사용되는 횡단 관심사(Cross-cutting logic)들이 위치하게 되며, 이를 통해 코드 재사용이 촉진되고 애플리케이션 로직 관리가 쉬워집니다 [2, 4].
*   **명명 규칙 (Naming Conventions):**
    클린 코드와 일관성을 위해 Custom Hook의 이름은 반드시 `camelCase`로 작성해야 하며, `use` 접두사로 시작하여 훅이라는 목적과 정체를 명확히 나타내야 합니다 (예: `useAuthState`) [3, 8-10].
*   **성능 최적화 고려사항:**
    의존성(dependencies)이 변하지 않는 상황에서 성능을 최적화하기 위해, Context Provider나 Custom Hook 자체를 메모이제이션(memoizing)하는 전략이 활용되기도 합니다 [11].

## 🔗 Knowledge Connections
- **Related Topics:** [[DRY Principle]], [[React Folder Structure]], [[Clean Code]], [[Naming Conventions]]
- **Projects/Contexts:** [[React Refactoring]], [[Scalable Frontend Architecture]]
- **Contradictions/Notes:** 소스 내에 Custom Hook과 관련한 특별한 모순점은 발견되지 않았으며, 여러 출처에서 공통적으로 관심사 분리, 코드 재사용 및 리팩토링을 위해 Custom Hook의 적극적인 활용을 권장합니다.

---
*Last updated: 2026-04-26*