---
id: FE-REACT-HOOKS-001
category: "10_Wiki/💡 Topics/AI"
confidence_score: 1.0
tags: [react, frontend, hooks, functional-programming, state-management, useEffect, useState]
last_reinforced: 2026-04-26
---

# React Hooks (리액트 훅)

## 📌 한 줄 통찰 (The Karpathy Summary)
> "클래스의 복잡한 생명주기(Lifecycle)를 직관적인 함수의 흐름으로 평탄화하고, 컴포넌트 간 상태 로직을 마법처럼 공유하라" — React 16.8부터 도입된, 함수형 컴포넌트에서도 상태와 생명주기 기능을 사용할 수 있게 해주는 혁신적인 API.

## 📖 구조화된 지식 (Synthesized Content)
- **추출된 패턴:** "Logic Decoupling and Composition Over Inheritance" — UI 렌더링과 비즈니스 로직을 분리하고, 커스텀 훅(Custom Hooks)을 통해 반복되는 로직을 독립적인 단위로 재사용하는 패턴.
- **주요 훅과 역할:**
    - **useState:** 컴포넌트 내의 로컬 상태 관리.
    - **useEffect:** API 호출, 이벤트 리스너 등 사이드 이펙트(Side Effects) 처리 및 클린업.
    - **useMemo / useCallback:** 불필요한 연산과 리렌더링을 방지하는 메모이제이션(Memoization).
    - **useContext:** 전역 상태 공유를 위한 Context API 접근.
- **의의:** 기존 HOC(High-Order Components)나 Render Props 방식의 'Wrapper Hell' 문제를 해결하고, 코드의 가독성과 테스트 가능성을 비약적으로 향상시킴.

## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
- **과거 데이터와의 충돌:** 초기에는 모든 최적화에 `useMemo` 등을 남발했으나, 최근 React Compiler(React Forget)의 등장으로 수동 최적화의 필요성이 줄어들고 있으며, 훅은 오직 최상위 레벨에서만 호출되어야 한다는 'Rules of Hooks' 정책이 더욱 엄격해짐.
- **정책 변화:** Antigravity 프로젝트는 모든 신규 프런트엔드 모듈에 함수형 컴포넌트와 훅 아키텍처를 강제하며, 복잡한 데이터 페칭 로직은 반드시 커스텀 훅으로 추상화하여 관리함.

## 🔗 지식 연결 (Graph)
- React-Architecture, [[Functional-Programming]], [[State-Management-Patterns]], SOLID-Principles-in-React
- **Raw Source:** 00_Raw/React Hooks.md