Antigravity Agent
43 lines
3.7 KiB
Markdown
43 lines
3.7 KiB
Markdown
## 📌 Brief Summary
|
|
React는 사용자 인터페이스를 상태(State)와 속성(Props)의 순수 함수로 표현하여 예측 가능성과 테스트 용이성을 극대화하는 선언형(Declarative) UI 라이브러리다. 컴포넌트 기반 아키텍처와 훅(Hooks) 시스템을 통해 모듈화된 웹 애플리케이션 구축을 지원하며, 현대적인 아키텍처(FSD) 및 최적화 도구(React Compiler)를 결합하여 대규모 시스템으로 확장 가능하다.
|
|
|
|
## 📖 Core Content
|
|
1. **확장 가능한 아키텍처 (FSD)**
|
|
- 단순 파일 타입 분리에서 벗어나 비즈니스 기능(Feature) 중심으로 코드를 그룹화하여 결합도를 낮추고 캡슐화를 강화한다.
|
|
2. **세분화된 상태 관리**
|
|
- 로컬 상태, 전역 앱 상태(Zustand/Redux), 서버 상태(TanStack Query)로 역할을 분리하여 리렌더링 폭포 현상을 방지한다.
|
|
3. **자동화된 성능 최적화**
|
|
- **React Compiler**: 빌드 타임 자동 메모이제이션으로 수동 `useMemo` 등의 오류를 해결하고 런타임 성능을 개선한다.
|
|
- **코드 스플리팅**: `React.lazy`와 Suspense를 통해 번들 크기를 최적화한다.
|
|
4. **복원력 있는 에러 핸들링**
|
|
- **Error Boundaries**: 런타임 자바스크립트 에러를 포착하여 전체 앱 다운을 방지하고 Fallback UI를 제공한다.
|
|
5. **엔지니어링 원칙의 준수**
|
|
- SOLID, DRY, KISS, YAGNI 원칙을 컴포넌트 및 커스텀 훅 설계에 철저히 적용하여 기술 부채를 최소화한다.
|
|
|
|
## ⚖️ Trade-offs & Caveats
|
|
- **자유도의 대가**: 특정 구조를 강제하지 않으므로, 프로젝트 초기 단계에서 명확한 아키텍처 가이드라인이 부재할 경우 코드베이스가 빠르게 스파게티화될 수 있다.
|
|
- **추상화 비용**: 훅과 컴포넌트 합성을 통한 고도의 추상화는 재사용성을 높이지만, 과할 경우 코드의 흐름을 파악하기 어렵게 만드는 인지적 부하를 초래한다.
|
|
- **버전 변화의 속도**: Server Components, React Compiler 등 패러다임이 빠르게 변화하므로 팀의 기술 스택을 지속적으로 업데이트해야 하는 운영 부담이 있다.
|
|
|
|
## 🔗 Knowledge Connections
|
|
### Related Concepts
|
|
- **Feature-Sliced Design (FSD)**: 대규모 구조화의 표준 (관계: 아키텍처 모델)
|
|
- **React Compiler**: 차세대 자동 최적화 장치 (관계: 성능 개선 도구)
|
|
- **State Management**: 데이터 흐름 제어의 핵심 (관계: 시스템 신경망)
|
|
|
|
### Deeper Research Questions
|
|
1. React Compiler 안정화 이후, 수동 메모이제이션(useMemo 등)이 여전히 필요한 유일한 시나리오는 무엇인가?
|
|
2. FSD 아키텍처에서 'Entities'와 'Features' 간의 의존성 역전을 통해 도메인 순수성을 유지하는 가장 우아한 방법은?
|
|
3. Context API의 브로드캐스트 성능 문제를 해결하기 위한 'Context Splitting' 패턴의 한계와 대안은?
|
|
4. Error Boundary가 잡지 못하는 비동기 에러를 전역 모니터링 시스템과 통합하기 위한 최적의 아키텍처 설계는?
|
|
5. Concurrent Mode에서 `useTransition`과 `useDeferredValue`가 실제 사용자 체감 성능(INP)에 미치는 정량적 영향은?
|
|
|
|
### Practical Application Contexts
|
|
- **신규 프로젝트 설계**: FSD 폴더 구조와 상태 관리 스택(Zustand/Query) 선정을 통한 안정적 개발 기반 마련.
|
|
- **레거시 코드 현대화**: 클래스 컴포넌트를 훅 기반으로 전환하고 불필요한 이펙트를 제거하여 성능과 유지보수성 강화.
|
|
|
|
### Adjacent Topics
|
|
- **Vite & Modern Build Tooling**
|
|
- **Design Systems & Storybook**
|
|
- **Server Components (RSC) & Streaming**
|