Antigravity Agent
4.4 KiB
4.4 KiB
📌 Brief Summary
React Component Design은 인터페이스 요소를 구조화하여 확장성, 유지보수성, 성능을 확보하는 아키텍처 실천법이다. 컴포넌트에 SOLID, DRY, KISS와 같은 소프트웨어 공학 원칙을 적용하여 각 컴포넌트가 명확한 책임을 갖고, 비즈니스 로직과 UI가 분리되며, 상호 독립적으로 합성될 수 있는 구조를 만드는 것을 목표로 한다.
📖 Core Content
- SOLID 원칙의 컴포넌트적 해석
- SRP (단일 책임): 컴포넌트는 하나의 구체적 역할만 수행해야 하며, 비대해진 로직은 커스텀 훅으로 분리한다.
- OCP (개방-폐쇄): 내부 코드를 수정하는 대신 컴포넌트 합성(Composition)이나
children을 통해 기능을 확장한다. - ISP (인터페이스 분리): 컴포넌트는 자신이 실제로 사용하는 최소한의 prop에만 의존해야 한다.
- 관심사의 분리 (Separation of Concerns)
- UI 컴포넌트에서 비즈니스 로직, 데이터 패칭, 부수 효과를 추출하여 커스텀 훅으로 캡슐화한다.
- 이를 통해 UI는 프렌젠테이션 역할에만 집중하고 로직은 독립적으로 테스트 가능한 구조를 확보한다.
- 계층적 아키텍처 (FSD)
- 범용 UI(Shared), 비즈니스 엔티티(Entities), 사용자 시나리오(Features) 등으로 컴포넌트의 범위를 계층화하여 관리한다.
- 안정성 및 성능 설계
- Error Boundaries: 특정 컴포넌트의 런타임 오류가 앱 전체를 멈추지 않도록 선언적으로 장애를 격리한다.
- 메모이제이션: 불필요한 리렌더링 방지를 위해
React.memo와 안정적인key전략을 사용한다.
- 명명 컨벤션
- 파일명은
kebab-case, 컴포넌트 및 타입은PascalCase, 변수 및 훅은camelCase를 준수하여 일관성을 유지한다.
- 파일명은
⚖️ Trade-offs & Caveats
- 추상화 vs 단순함: 로직 분리와 추상화는 유지보수성을 높이지만, 너무 많은 커스텀 훅과 컴포넌트 분리는 코드를 한눈에 파악하기 어렵게 만드는 '인지적 파편화'를 초래할 수 있다(KISS 원칙과의 충돌).
- 성능 오버헤드:
React.memo등의 메모이제이션을 남발할 경우, 비교 연산 자체의 비용이 렌더링 비용보다 커지는 역효과가 발생할 수 있다. - 설계 시간 비용: 확장을 고려한 OCP 설계는 초기 개발 시간을 증가시키며, 실제로 발생하지 않을 확장을 대비하는 과잉 엔지니어링(YAGNI 위반)이 될 위험이 있다.
🔗 Knowledge Connections
Related Concepts (Auto-Linked)
- Atomic Design
- Boundaries
- Custom_Hooks
- Design_Systems
- Error Boundaries
- Feature-Sliced_Design
- Principles
- Prop Drilling
- React
- React Server Components
- Research
- SOLID_Principles
- Separation_of_Concerns
- Server Components
Related Concepts
- SOLID Principles: 고품질 컴포넌트 설계의 기준 (관계: 설계 원칙)
- Custom Hooks: 로직 분리와 재사용의 핵심 도구 (관계: 실천 수단)
- Error Boundaries: 시스템 복원력 확보 (관계: 방어적 설계)
Deeper Research Questions
- 컴포넌트 합성(Composition)을 통해 OCP를 지킬 때 발생하는 'Prop Drilling' 문제를 아키텍처적으로 우아하게 해결하는 방법은?
- React Server Components 환경에서 '프레젠테이션과 로직의 분리' 패턴은 어떻게 변화해야 하는가?
React.memo를 통한 최적화가 실질적인 성능 이득을 주는지 판단하기 위한 정량적 프로파일링 기준은?- 대규모 폼(Form) 설계 시, ISP를 준수하면서도 유효성 검사 로직의 응집도를 유지하는 컴포넌트 인터페이스 설계법은?
- Error Boundary가 포착하지 못하는 비동기 에러를 컴포넌트 생명주기 내부로 끌어들여 통합 처리하는 패턴은?
Practical Application Contexts
- UI 컴포넌트 라이브러리 구축: 다양한 프로젝트에서 재사용 가능한 고도로 유연한 베이스 컴포넌트 설계.
- 레거시 컴포넌트 리팩토링: 1000줄 이상의 거대한 컴포넌트를 기능별로 쪼개고 로직을 훅으로 추출하여 유지보수성 확보.
Adjacent Topics
- React Hooks & Lifecycle
- Feature-Sliced Design (FSD)
- Design Systems & Atomic Design