---
id: FE-ARCH-REACT-MODERN-001
category: Unified
confidence_score: 1.0
tags: [react, [[Architecture|Architecture]], components, separation-of-concerns, domain-driven-design, hooks, [[Scalability|Scalability]]]
last_reinforced: 2026-04-26
---

# Modern React Application Architecture Patterns (현대 React 애플리케이션 아키텍처 패턴)

## 📌 한 줄 통찰 (The Karpathy Summary)
> "UI 렌더링(JSX), 비즈니스 로직(Custom Hooks), 상태 관리(Global/Server [[State|State]]), 그리고 도메인 규칙(Features)을 명확하게 분리하여, 변화에 유연하고 테스트 가능한 '컴포넌트 중심 분산 시스템'을 설계하라" — 확장성 있는 React 앱을 위한 구조적 가이드라인.

## 📖 구조화된 지식 (Synthesized Content)
- **추출된 패턴:** "Feature-Based Modularization and Functional Decoupling" — 코드를 기술적 역할(Components, Hooks)이 아닌 비즈니스 도메인(Features) 단위로 응집시키고, 관심사를 분리하여 유지보수성을 극대화하는 패턴.
- **핵심 아키텍처 전략:**
    - **Custom Hooks for [[Logic|Logic]]:** 모든 비즈니스 로직과 데이터 페칭은 컴포넌트 내부가 아닌 전용 커스텀 훅으로 추출하여 UI와 결합도 최소화.
    - **[[Compound Components Pattern|Compound Components Pattern]]:** 복잡한 UI 요소를 부모-자식 관계의 작은 컴포넌트들로 조합하여 유연한 API 제공.
    - **Container-Presenter Logic:** (현대적으로 재해석) 순수 UI 컴포넌트와 비즈니스 로직이 주입된 래퍼 컴포넌트의 명확한 역할 분담.
    - **Server State [[Management|Management]]:** 클라이언트 전역 상태와 서버 데이터(Cache)를 분리하여 `TanStack Query` 등으로 효율적 관리.
- **의의:** 요구사항 변경 시 영향 범위를 최소화하고, 수백 명의 개발자가 협업해도 코드 충돌이 적은 안정적인 코드베이스 유지.

## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
- **과거 데이터와의 충돌:** 과거에는 Redux에 모든 상태를 몰아넣는 정책이 일반적이었으나, 현대 정책은 '상태의 성격(UI vs Server vs Global)에 따른 파편화 정책'을 선호함.
- **정책 변화:** Antigravity 프로젝트는 모든 비즈니스 로직이 포함된 훅에 대해 반드시 단위 테스트 작성을 의무화하며, 뷰(View)와 모델(Model)의 강결합을 엄격히 제한하는 정책을 시행함.

## 🔗 지식 연결 (Graph)
- [[Large-scale-Application-Architecture-Patterns|Large-scale-Application-Architecture-Patterns]], [[Custom-Hooks-Patterns|Custom-Hooks-Patterns]], [[State-Management-Architecture-and-Ownership|State-Management-Architecture-and-Ownership]], [[Frontend-Architecture-and-Folder-Structure|Frontend-Architecture-and-Folder-Structure]]
- **Raw Source:** 00_Raw/React Application Architecture.md