Antigravity Agent
4.1 KiB
4.1 KiB
📌 Brief Summary
React Architecture는 컴포넌트, 상태 관리, 파일 구조를 체계적으로 설계하여 애플리케이션의 확장성, 유지보수성, 성능을 극대화하는 소프트웨어 시스템 디자인이다. 특정 아키텍처를 강제하지 않는 라이브러리의 특성을 보완하기 위해 기능(Feature) 중심의 모듈화와 단방향 의존성 규칙을 적용하여 비즈니스 로직과 UI의 결합을 최소화하는 것을 목표로 한다.
📖 Core Content
- 기능 기반 구조 (Feature-based Structure)
- 기술적 타입(컴포넌트, 훅) 중심의 구조에서 벗어나 비즈니스 도메인별로 코드를 캡슐화하여 응집도를 높인다.
- 관련된 API, 상태, 타입, 컴포넌트를 하나의 기능 폴더 내에 배치하여 수정 범위를 명확히 한다.
- Feature-Sliced Design (FSD)
- 현대 React 아키텍처의 표준으로, 앱을
Shared,Entities,Features,Widgets,Pages,App계층으로 나눈다. - 상위 계층이 하위 계층에만 의존하는 단방향 의존성과
index.ts를 통한 Public API 규칙을 강제하여 결합도를 낮춘다.
- 현대 React 아키텍처의 표준으로, 앱을
- 분산형 상태 관리 아키텍처
- 상태를 성격에 따라 로컬, 전역 앱 상태(Zustand/Redux), 서버 상태(TanStack Query), URL 상태로 세분화하여 관리한다.
- Context API의 리렌더링 한계를 이해하고, 성능이 중요한 전역 상태에는 Selector 패턴이 지원되는 도구를 사용한다.
- 클린 코드 및 SOLID 원칙
- 컴포넌트당 단일 책임(SRP)을 부여하고, 컴포넌트 합성을 통해 수정 없이 기능을 확장(OCP)한다.
- 성능 및 복원력 설계
- React Server Components(RSC)를 통한 번들 최적화와 Error Boundary를 활용한 장애 격리 전략을 아키텍처 수준에서 수립한다.
⚖️ Trade-offs & Caveats
- 아키텍처 인지 부하: FSD와 같은 엄격한 레이어링은 팀의 학습 곡선을 높이며, 간단한 수정에도 여러 파일을 건드려야 하는 'Boilerplate' 오버헤드를 유발할 수 있다.
- 과도한 캡슐화: 기능을 너무 잘게 쪼갤 경우 기능 간 공통 로직(Shared)의 비대화를 초래하거나, 모듈 간 데이터 통신이 복잡해지는 트레이드오프가 있다.
- 라이브러리 종속성: 특정 아키텍처에 최적화된 도구(예: Next.js와 RSC)를 선택할 경우, 향후 다른 프레임워크로의 전환 비용이 매우 높아진다.
🔗 Knowledge Connections
Related Concepts
- Feature-Sliced Design (FSD): 구조적 캡슐화와 의존성 제어의 핵심 (관계: 핵심 방법론)
- State Management Architecture: 데이터 흐름의 계층화 (관계: 데이터 레이어 설계)
- SOLID Principles: 확장 가능한 컴포넌트 설계의 근간 (관계: 설계 철학)
Deeper Research Questions
- FSD 구조에서 'Features'와 'Widgets' 계층의 책임 경계가 모호할 때, 어떤 비즈니스 기준을 적용해야 아키텍처의 일관성을 유지할 수 있는가?
- RSC(서버 컴포넌트) 도입이 기존의 클라이언트 중심 상태 관리 아키텍처를 어떻게 단순화하거나 복잡하게 만드는가?
- 아키텍처 규칙(단방향 의존성 등)을 어기는 코드 작성을 CI 단계에서 원천적으로 차단하기 위한 린트 규칙 커스터마이징 방안은?
- 대규모 팀에서 마이크로 프론트엔드로 전환할 때, 중앙 집중식 아키텍처 거버넌스와 팀별 자율성 사이의 균형점은 어디인가?
- React Compiler가 자동 메모이제이션을 수행할 때, 아키텍처적으로 '불변성(Immutability)'을 강제하는 것이 성능에 미치는 정량적 영향은?
Practical Application Contexts
- 대규모 제품 설계: 수백 개의 컴포넌트가 얽힌 엔터프라이즈급 SaaS의 확장 가능한 뼈대 구축.
- 성능 및 품질 개선: 스파게티 코드로 변한 레거시 React 앱을 기능별 모듈로 격리 및 리팩토링.
Adjacent Topics
- Micro-Frontends
- Server Components (RSC)
- Test-Driven Development (TDD) in React