Antigravity Agent
4.5 KiB
4.5 KiB
React Hooks
📌 Brief Summary
React Hooks는 함수형 컴포넌트에서 상태(state)와 사이드 이펙트(side effects)를 관리하기 위한 강력한 패러다임입니다 [1]. 대규모 확장 가능한 애플리케이션(scalable apps)에서 Hooks는 데이터 접근, 도메인 규칙 및 부수 효과 로직을 캡슐화하는 핵심 아키텍처 빌딩 블록 역할을 합니다 [2]. 공통 로직을 커스텀 훅(Custom Hooks)으로 추출함으로써 DRY(Don't Repeat Yourself) 같은 클린 코드 원칙을 준수하고, UI와 비즈니스 로직을 분리하여 코드의 모듈성과 테스트 용이성을 극대화할 수 있습니다 [3, 4].
📖 Core Content
-
아키텍처 및 폴더 구조(Folder Structure)에서의 역할
- React에서 Hooks는 단순히 편리한 기능을 넘어 시스템 설계의 필수 요소입니다 [2]. 대규모 애플리케이션에서는 훅이 전역에 무분별하게 흩어지는 것을 막기 위해 '누가 어떤 훅을 사용하고 어디에 배치할지'에 대한 명확한 구조적 규칙이 필요합니다 [2].
- 일반적으로 재사용 가능한 커스텀 훅(예:
useAuth,useForm등)은src/hooks/폴더에 중앙 집중화하여 저장하며, 이는 코드 재사용성을 촉진하고 유지보수를 쉽게 만듭니다 [5-7]. - 네이밍 컨벤션(Naming Conventions)에 따라 커스텀 훅은 반드시
camelCase를 사용하고use접두사를 붙여 명명해야 합니다 [8, 9].
-
리팩토링 기법(Refactoring Techniques)으로서의 Hooks
- 현대 React 코드베이스에서 커스텀 훅은 리팩토링의 1차 단위(primary unit of refactoring)가 됩니다 [4]. 크고 복잡한 컴포넌트에서 데이터 페칭이나 폼 처리 같은 로직을 분리하여 커스텀 훅으로 추출하면, 컴포넌트는 UI 렌더링에만 집중할 수 있게 되어 단일 책임 원칙(SRP)을 지킬 수 있습니다 [4, 10].
- 이러한 추출 작업은 비즈니스 로직을 독립적으로 분리하여 실행 속도가 느린 통합 테스트 대신 빠른 단위 테스트를 가능하게 합니다 [4].
-
훅 사용 시 흔한 함정(Common Pitfalls) 및 디버깅
- Rules of Hooks: 훅은 반드시 React 함수형 컴포넌트나 커스텀 훅 내의 최상위 레벨에서만 호출되어야 하며, 조건문이나 반복문 내부에서 호출해서는 안 됩니다 [11].
useEffect의 오용: 종속성 배열(dependency array)을 잘못 설정하거나 이벤트 리스너 등의 클린업(cleanup) 함수를 반환하지 않으면 메모리 누수(memory leaks)와 심각한 성능 저하가 발생합니다 [11-13]. 불필요한 리렌더링을 유발하는useEffect남용을 피하고, 가능하면useMemo나useCallback으로 대체해야 합니다 [12, 14].useState의 오용: 이전 값을 기반으로 상태를 업데이트할 때 함수형 업데이트를 사용하지 않거나, 복잡한 상태 관리에useState를 고집하는 것은 버그를 유발할 수 있으므로 상황에 따라useReducer나 커스텀 훅을 활용해야 합니다 [15].
-
성능 최적화(Performance Optimization)
useCallback과useMemo: 렌더링 간 객체나 함수의 참조 안정성(reference stability)을 유지하여 불필요한 자식 컴포넌트의 리렌더링을 막거나 비용이 큰 연산을 최적화하는 데 필수적입니다 [12, 16-18].useTransition및useDeferredValue: React 18 이상의 동시성 렌더링(Concurrent Rendering) 훅으로, 무거운 필터링이나 데이터 업데이트를 지연(defer)시키고 타이핑이나 클릭 같은 사용자의 즉각적인 인터랙션을 우선시하여 UI의 반응성을 높게 유지합니다 [19-21].
🔗 Knowledge Connections
- Related Topics: React Architecture, Clean Code Principles, Performance Optimization, Refactoring Techniques, Folder Structure Best Practices
- Projects/Contexts: Feature-Sliced Design, Concurrent Rendering in React 18+
- Contradictions/Notes: 수동으로
useMemo나useCallback을 사용하는 최적화 방식은 코드를 어수선하게 만들고 유지보수 비용을 높일 수 있습니다. 2025년 기준, React Compiler의 도입으로 인해 개발자가 직접 이러한 훅을 작성하지 않아도 빌드 타임에 자동으로 세분화된 메모이제이션이 수행되어 수동 훅 최적화의 필요성이 줄어들고 있습니다 [22-25].
Last updated: 2026-04-26