---
id: pattern-react-state
title: "React State Pattern"
category: "Pattern_Web"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["React state", "리액트 상태 패턴", "hooks", "lifting state up", "server state"]
duplicate_of: ""
source_trust_level: "A"
confidence_score: 0.85
created_at: 2026-06-13
updated_at: 2026-06-13
review_reason: ""
merge_history: []
tags: ["pattern", "web", "react", "frontend", "state", "platform-independent"]
raw_sources: ["일반 프런트엔드 공학 지식"]
applied_in: []
github_commit: ""
---

# [[React State Pattern]]

## 🎯 한 줄 통찰 (One-line insight)
React(및 유사 선언형 UI) 상태의 핵심 규칙은 "**상태를 필요한 가장 낮은 곳에 두되, 공유되면 끌어올리고, 서버 데이터는 UI 상태와 분리**" 하는 것 — 이는 [[State Management Pattern]] 의 프런트엔드 구체화다.

## 🧠 핵심 개념 (Core concepts)
1. **로컬 상태(useState):** 한 컴포넌트만 쓰는 상태.
2. **lifting state up:** 두 형제가 공유하면 공통 부모로.
3. **전역 상태(Context/Zustand/Redux):** 앱 전반 공유(과용 금지).
4. **서버 상태(react-query/SWR):** 원격 데이터는 캐시·동기화 라이브러리로 분리.
5. **파생 상태:** useMemo 로 계산, 저장하지 않음.

## 📖 세부 내용 (Details · 패턴 명세)
- **Problem (언제 쓰나):** 컴포넌트 트리에서 상태 위치·공유 범위를 정할 때.
- **사용 조건:** 선언형 UI; 단방향 데이터.
- **장점:** 예측 가능 렌더, 재사용, 테스트성.
- **단점:** prop drilling(전역 미사용 시), 과한 전역화는 리렌더·결합, 서버/클라 상태 혼동.
- **대안:** 전역 store(공유 많을 때), 서버 상태 라이브러리, URL 상태(공유 가능 상태).
- **실패 사례:** 서버 데이터를 useState 에 복사→stale·동기화 버그; 모든 걸 전역 store 에→불필요 리렌더·결합; 파생값 저장; 깊은 prop drilling.

## 💻 코드 패턴 (Code patterns)
```text
const [v, setV] = useState(init)           # 로컬
// 공유되면 부모로 올리고 props/context 로 전달
const data = useQuery('key', fetcher)       # 서버 상태는 분리(캐시/리페치)
const total = useMemo(() => sum(items), [items])  # 파생은 계산
```

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
"Redux 가 정석" 은 옛말 — 서버 상태는 react-query, 지역은 useState, 진짜 전역만 가벼운 store. 도구보다 *상태의 출처/수명* 으로 위치를 정하라.

## 🛠️ 적용 사례 (Applied in summary)
일반 React 앱. (ConnectAI 웹뷰는 메시지 기반 — 원리는 [[State Management Pattern]] 와 동일.)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[패턴 카탈로그 인덱스]]
- **관련 개념:** [[State Management Pattern]], [[Data Flow Pattern]], [[Infinite Scroll Pattern]], [[웹 개발 가이드]]
- **참조 맥락:** 작은 모델이 프런트엔드 상태를 설계할 때 참조.

## 📚 출처 (Sources)
- [S1] 일반 React/프런트엔드 상태 지식

## 📝 변경 이력 (Change history)
- 2026-06-13: 프로젝트 독립 패턴 카드 작성.
