Antigravity Agent
2.6 KiB
2.6 KiB
id, category, confidence_score, tags, last_reinforced
| id | category | confidence_score | tags | last_reinforced | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| FE-ARCH-REACT-MODERN-001 | 10_Wiki/💡 Topics/AI | 1.0 |
|
2026-04-26 |
Modern React Application Architecture Patterns (현대 React 애플리케이션 아키텍처 패턴)
📌 한 줄 통찰 (The Karpathy Summary)
"UI 렌더링(JSX), 비즈니스 로직(Custom Hooks), 상태 관리(Global/Server State), 그리고 도메인 규칙(Features)을 명확하게 분리하여, 변화에 유연하고 테스트 가능한 '컴포넌트 중심 분산 시스템'을 설계하라" — 확장성 있는 React 앱을 위한 구조적 가이드라인.
📖 구조화된 지식 (Synthesized Content)
- 추출된 패턴: "Feature-Based Modularization and Functional Decoupling" — 코드를 기술적 역할(Components, Hooks)이 아닌 비즈니스 도메인(Features) 단위로 응집시키고, 관심사를 분리하여 유지보수성을 극대화하는 패턴.
- 핵심 아키텍처 전략:
- Custom Hooks for Logic: 모든 비즈니스 로직과 데이터 페칭은 컴포넌트 내부가 아닌 전용 커스텀 훅으로 추출하여 UI와 결합도 최소화.
- Compound Components Pattern: 복잡한 UI 요소를 부모-자식 관계의 작은 컴포넌트들로 조합하여 유연한 API 제공.
- Container-Presenter Logic: (현대적으로 재해석) 순수 UI 컴포넌트와 비즈니스 로직이 주입된 래퍼 컴포넌트의 명확한 역할 분담.
- Server State Management: 클라이언트 전역 상태와 서버 데이터(Cache)를 분리하여
TanStack Query등으로 효율적 관리.
- 의의: 요구사항 변경 시 영향 범위를 최소화하고, 수백 명의 개발자가 협업해도 코드 충돌이 적은 안정적인 코드베이스 유지.
⚠️ 모순 및 업데이트 (Contradictions & RL Update)
- 과거 데이터와의 충돌: 과거에는 Redux에 모든 상태를 몰아넣는 정책이 일반적이었으나, 현대 정책은 '상태의 성격(UI vs Server vs Global)에 따른 파편화 정책'을 선호함.
- 정책 변화: Antigravity 프로젝트는 모든 비즈니스 로직이 포함된 훅에 대해 반드시 단위 테스트 작성을 의무화하며, 뷰(View)와 모델(Model)의 강결합을 엄격히 제한하는 정책을 시행함.