Organizer 정리 산출물(From_RawData) + 이사 체크리스트 + 인덱스 갱신
- Raw_Data 자동 정리 산출물이 각 도메인 From_RawData/ 로 편입, 00_INDEX 연결 갱신 - 컴퓨터_이사_체크리스트.md 추가 (두뇌-상대 경로 규약 v2.2.304 — 새 컴퓨터에서 바꿀 절대 경로는 localBrainPath 1개) - Astra 세션 산출물(에피소드 기억·기능 인벤토리) 갱신 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,81 @@
|
||||
---
|
||||
id: react-hooks
|
||||
title: "React Hooks"
|
||||
category: "Frontend"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases:
|
||||
- "Hooks"
|
||||
- "리액트 훅"
|
||||
- "React 훅"
|
||||
- "useState"
|
||||
- "useContext"
|
||||
- "useReducer"
|
||||
duplicate_of: ""
|
||||
source_trust_level: "A"
|
||||
confidence_score: 0.95
|
||||
created_at: 2026-07-11
|
||||
updated_at: 2026-07-11
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["research", "context 이해 규칙"]
|
||||
raw_sources:
|
||||
- "Blogged Answers: Why React Context is Not a \"State Management\" Tool (and Why It Doesn't Replace Redux)"
|
||||
- "Context - React"
|
||||
- "초보자를 위한 리액트 Context - 완벽 가이드 (2021) - freeCodeCamp"
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[React Hooks]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
React Hooks(`useState`, `useReducer`, `useContext` 등)는 컴포넌트의 로컬 상태 관리를 가능하게 하고, Context와 결합하여 prop-drilling 없이 전역 데이터를 효율적으로 공유할 수 있게 하는 핵심 도구이다.
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
* **상태 관리 훅 (`useState`, `useReducer`)**: 컴포넌트 내에서 초기값을 저장하고, 현재 값을 읽어오며, 제공된 함수를 통해 값을 업데이트하고, 변경 시 컴포넌트를 리렌더링하여 상태 변화를 관리하는 역할을 수행한다 [S1].
|
||||
* **Context 접근 훅 (`useContext`)**: `React.createContext()`로 생성된 컨텍스트 객체를 함수형 컴포넌트 최상단에서 직접 읽어올 수 있게 해주는 훅으로, 복잡한 렌더 프롭스(render props) 패턴을 대체하여 코드를 간결하게 만든다 [S1], [S3].
|
||||
* **Context + `useReducer` 조합**: 상태 관리 훅(`useReducer`)으로 생성된 상태와 디스패치 함수를 Context를 통해 하위 컴포넌트로 전달함으로써, 외부 라이브러리 없이도 중간 규모의 상태 관리를 구현하는 아키텍처 패턴이다 [S1], [S3].
|
||||
|
||||
## 🧩 추출된 패턴 (Extracted patterns)
|
||||
* **의존성 주입 패턴 (Dependency Injection Pattern)**: 하위 컴포넌트가 특정 데이터를 자체적으로 생성하지 않고, 상위 컴포넌트의 Provider가 제공하는 값을 `useContext` 훅을 통해 런타임에 주입받아 사용하는 패턴 [S1].
|
||||
* **상태 위임 패턴 (State Delegation Pattern)**: Context 자체는 값을 저장하거나 관리하지 않으며, 실제 데이터의 저장과 업데이트 로직은 상위 컴포넌트의 `useState`나 `useReducer` 훅에 위임하여 처리하는 패턴 [S1].
|
||||
|
||||
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
|
||||
|
||||
| 항목 (Option) | 장점 | 단점 | 언제 선택 |
|
||||
|---|---|---|---|
|
||||
| **Context + `useReducer` 훅** | 외부 라이브러리(Redux 등)가 필요 없어 설정이 간단함. React 내장 기능만으로 적당한 수준의 상태 관리 구현 가능 [S1]. | 상태 값이 변경될 때 해당 Context를 구독하는 **모든** 하위 컴포넌트가 강제로 리렌더링됨. 특정 데이터만 선택적으로 구독할 수 없어 성능 이슈 발생 가능 [S1], [S3]. | 컴포넌트의 상태가 적당히 복잡하고, 상태 업데이트 빈도가 낮으며(예: 테마, 로케일 설정), 외부 라이브러리를 추가하고 싶지 않을 때 [S1], [S3]. |
|
||||
| **Redux + React-Redux 훅 (`useSelector`)** | DevTools를 통한 상태 변경의 히스토리 추적 가능. 미들웨어를 통한 부수 효과(Side Effect) 관리 가능. 컴포넌트가 스토어의 특정 상태 조각만 구독하여 불필요한 리렌더링 방지 가능 [S1]. | 초기 학습 곡선이 존재하며 추가적인 의존성(라이브러리) 설치가 필요함 [S1]. | 애플리케이션 상태가 크고 복잡하며, 상태 업데이트가 매우 빈번하고, 다수의 개발자가 협업하여 강력한 상태 변경 추적이 필요할 때 [S1]. |
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
* **Hooks의 기본 역할과 상태 관리**: React Hooks는 React 16.8부터 도입된 기능으로, `useState`, `useEffect`, `useContext`, `useReducer` 등의 기본 훅과 커스텀 훅을 통해 함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 한다 [S2]. 특히 `useState`와 `useReducer`는 초기값을 저장하고, 읽고, 업데이트하며, 업데이트 시 컴포넌트를 리렌더링하여 변경을 알리는 '상태 관리(State Management)'의 정의를 정확히 충족한다 [S1].
|
||||
* **`useContext`를 활용한 간결화**: 이전 버전의 React에서는 Context의 값을 읽기 위해 Consumer 컴포넌트와 렌더 프롭스(render props) 패턴을 사용해야 했으나, `useContext` 훅을 사용하면 컴포넌트 최상단에서 전체 Context 객체를 전달받아 훨씬 간결하고 직관적으로 코드를 작성할 수 있으며 커스텀 훅으로의 확장도 용이해진다 [S1], [S3].
|
||||
* **Prop-drilling 문제 해결**: React 컴포넌트 트리에서 하위 컴포넌트로 데이터를 전달할 때 중간 컴포넌트들이 불필요하게 props를 전달받아야 하는 'prop-drilling' 문제가 발생한다. `useContext` 훅을 사용하면 이 문제를 효과적으로 우회하여 데이터를 필요로 하는 계층에 직접 연결할 수 있다 [S3].
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
* **"Context는 상태 관리 도구인가?"에 대한 오해**: React 커뮤니티에서 많은 개발자가 `useContext`를 활용하는 Context API를 Redux를 대체하는 '상태 관리 도구'로 칭하지만, 이는 기술적 모순이다. Context 자체는 훅이 제공하는 데이터를 하위로 전달(공유)하는 파이프나 웜홀 같은 수송 메커니즘일 뿐, 데이터를 저장하고 업데이트하는 실제 '상태 관리'는 `useState`나 `useReducer` 같은 Hooks가 전담한다 [S1], [S3].
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다. (소스 데이터 내에서 특정 파일 경로, Git 커밋 해시, 또는 구체적인 사내 프로젝트 적용 결정 사항이 명시되어 있지 않음)
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
소스에 코드 예시 없음. (제공된 소스에서는 "다음 예제 코드를 보면", "useContext 훅을 사용한 예시는 다음과 같습니다." 등의 서술만 존재할 뿐 실제 마크다운 코드 스니펫은 텍스트 내에 포함되어 있지 않음)
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** A
|
||||
- **신뢰 점수:** 0.95
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[context 이해 규칙]]
|
||||
- **관련 개념:** [[상태 관리(State Management)]], [[React Context API]]
|
||||
- **참조 맥락:** React 애플리케이션 아키텍처 설계 시, 전역 상태 관리 전략(Redux 대 Context API+Hooks)을 비교하고 선택할 때 핵심 참조 지식으로 활용.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] Blogged Answers: Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux) (https://blog.isquaredsoftware.com/2021/01/blogged-answers-why-react-context-is-not-a-state-management-tool-and-why-it-doesnt-replace-redux/)
|
||||
- [S2] Context - React (https://legacy.reactjs.org/docs/context.html)
|
||||
- [S3] 초보자를 위한 리액트 Context - 완벽 가이드 (2021) - freeCodeCamp (https://www.freecodecamp.org/korean/news/cobojareul-wihan-riaegteu-context-wanbyeog-gaideu-2021/)
|
||||
Reference in New Issue
Block a user