Antigravity Agent
62 lines
4.4 KiB
Markdown
62 lines
4.4 KiB
Markdown
## 📌 Brief Summary
|
|
React Component Design은 인터페이스 요소를 구조화하여 확장성, 유지보수성, 성능을 확보하는 아키텍처 실천법이다. 컴포넌트에 SOLID, DRY, KISS와 같은 소프트웨어 공학 원칙을 적용하여 각 컴포넌트가 명확한 책임을 갖고, 비즈니스 로직과 UI가 분리되며, 상호 독립적으로 합성될 수 있는 구조를 만드는 것을 목표로 한다.
|
|
|
|
## 📖 Core Content
|
|
1. **SOLID 원칙의 컴포넌트적 해석**
|
|
- **SRP (단일 책임)**: 컴포넌트는 하나의 구체적 역할만 수행해야 하며, 비대해진 로직은 커스텀 훅으로 분리한다.
|
|
- **OCP (개방-폐쇄)**: 내부 코드를 수정하는 대신 컴포넌트 합성(Composition)이나 `children`을 통해 기능을 확장한다.
|
|
- **ISP (인터페이스 분리)**: 컴포넌트는 자신이 실제로 사용하는 최소한의 prop에만 의존해야 한다.
|
|
2. **관심사의 분리 (Separation of Concerns)**
|
|
- UI 컴포넌트에서 비즈니스 로직, 데이터 패칭, 부수 효과를 추출하여 커스텀 훅으로 캡슐화한다.
|
|
- 이를 통해 UI는 프렌젠테이션 역할에만 집중하고 로직은 독립적으로 테스트 가능한 구조를 확보한다.
|
|
3. **계층적 아키텍처 (FSD)**
|
|
- 범용 UI(Shared), 비즈니스 엔티티(Entities), 사용자 시나리오(Features) 등으로 컴포넌트의 범위를 계층화하여 관리한다.
|
|
4. **안정성 및 성능 설계**
|
|
- **Error Boundaries**: 특정 컴포넌트의 런타임 오류가 앱 전체를 멈추지 않도록 선언적으로 장애를 격리한다.
|
|
- **메모이제이션**: 불필요한 리렌더링 방지를 위해 `React.memo`와 안정적인 `key` 전략을 사용한다.
|
|
5. **명명 컨벤션**
|
|
- 파일명은 `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
|
|
1. 컴포넌트 합성(Composition)을 통해 OCP를 지킬 때 발생하는 'Prop Drilling' 문제를 아키텍처적으로 우아하게 해결하는 방법은?
|
|
2. React Server Components 환경에서 '프레젠테이션과 로직의 분리' 패턴은 어떻게 변화해야 하는가?
|
|
3. `React.memo`를 통한 최적화가 실질적인 성능 이득을 주는지 판단하기 위한 정량적 프로파일링 기준은?
|
|
4. 대규모 폼(Form) 설계 시, ISP를 준수하면서도 유효성 검사 로직의 응집도를 유지하는 컴포넌트 인터페이스 설계법은?
|
|
5. Error Boundary가 포착하지 못하는 비동기 에러를 컴포넌트 생명주기 내부로 끌어들여 통합 처리하는 패턴은?
|
|
|
|
### Practical Application Contexts
|
|
- **UI 컴포넌트 라이브러리 구축**: 다양한 프로젝트에서 재사용 가능한 고도로 유연한 베이스 컴포넌트 설계.
|
|
- **레거시 컴포넌트 리팩토링**: 1000줄 이상의 거대한 컴포넌트를 기능별로 쪼개고 로직을 훅으로 추출하여 유지보수성 확보.
|
|
|
|
### Adjacent Topics
|
|
- **React Hooks & Lifecycle**
|
|
- **Feature-Sliced Design (FSD)**
|
|
- **Design Systems & Atomic Design**
|