Antigravity Agent
3.7 KiB
3.7 KiB
📌 Brief Summary
React는 사용자 인터페이스를 상태(State)와 속성(Props)의 순수 함수로 표현하여 예측 가능성과 테스트 용이성을 극대화하는 선언형(Declarative) UI 라이브러리다. 컴포넌트 기반 아키텍처와 훅(Hooks) 시스템을 통해 모듈화된 웹 애플리케이션 구축을 지원하며, 현대적인 아키텍처(FSD) 및 최적화 도구(React Compiler)를 결합하여 대규모 시스템으로 확장 가능하다.
📖 Core Content
- 확장 가능한 아키텍처 (FSD)
- 단순 파일 타입 분리에서 벗어나 비즈니스 기능(Feature) 중심으로 코드를 그룹화하여 결합도를 낮추고 캡슐화를 강화한다.
- 세분화된 상태 관리
- 로컬 상태, 전역 앱 상태(Zustand/Redux), 서버 상태(TanStack Query)로 역할을 분리하여 리렌더링 폭포 현상을 방지한다.
- 자동화된 성능 최적화
- React Compiler: 빌드 타임 자동 메모이제이션으로 수동
useMemo등의 오류를 해결하고 런타임 성능을 개선한다. - 코드 스플리팅:
React.lazy와 Suspense를 통해 번들 크기를 최적화한다.
- React Compiler: 빌드 타임 자동 메모이제이션으로 수동
- 복원력 있는 에러 핸들링
- Error Boundaries: 런타임 자바스크립트 에러를 포착하여 전체 앱 다운을 방지하고 Fallback UI를 제공한다.
- 엔지니어링 원칙의 준수
- 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
- React Compiler 안정화 이후, 수동 메모이제이션(useMemo 등)이 여전히 필요한 유일한 시나리오는 무엇인가?
- FSD 아키텍처에서 'Entities'와 'Features' 간의 의존성 역전을 통해 도메인 순수성을 유지하는 가장 우아한 방법은?
- Context API의 브로드캐스트 성능 문제를 해결하기 위한 'Context Splitting' 패턴의 한계와 대안은?
- Error Boundary가 잡지 못하는 비동기 에러를 전역 모니터링 시스템과 통합하기 위한 최적의 아키텍처 설계는?
- Concurrent Mode에서
useTransition과useDeferredValue가 실제 사용자 체감 성능(INP)에 미치는 정량적 영향은?
Practical Application Contexts
- 신규 프로젝트 설계: FSD 폴더 구조와 상태 관리 스택(Zustand/Query) 선정을 통한 안정적 개발 기반 마련.
- 레거시 코드 현대화: 클래스 컴포넌트를 훅 기반으로 전환하고 불필요한 이펙트를 제거하여 성능과 유지보수성 강화.
Adjacent Topics
- Vite & Modern Build Tooling
- Design Systems & Storybook
- Server Components (RSC) & Streaming