# [[Component Composition]]

## 📌 Brief Summary
컴포넌트 합성(Component Composition)은 작은 선언적 컴포넌트들을 조립하여 더 크고 복잡한 컴포넌트 트리를 구성하는 React의 핵심 패턴입니다 [1]. 이는 `children` prop이나 렌더 프롭(render props)을 활용하여 내부 소스 코드 수정 없이 컴포넌트에 새로운 기능을 확장할 수 있게 함으로써 개방-폐쇄 원칙(OCP)을 충족시킵니다 [2, 3]. 확장 가능한 프론트엔드 아키텍처(예: Feature-Sliced Design)에서는 비즈니스 로직을 포함하지 않고 하위 모듈들을 오케스트레이션하여 UI를 조립하는 방식으로 널리 활용됩니다 [4].

## 📖 Core Content
* **선언적 UI 조립:** React의 JSX는 컴포넌트 트리 관점에서 생각하도록 장려하며, 상태(state)와 프롭스(props)의 순수 함수로서 UI를 표현합니다. 이러한 합성을 통한 선언적 접근은 예측 가능성과 테스트 용이성을 높여줍니다 [1].
* **개방-폐쇄 원칙(OCP)의 구현:** SOLID 원칙 중 개방-폐쇄 원칙은 React에서 컴포넌트 합성을 통해 구현됩니다. 기존 컴포넌트를 직접 수정하는 대신 `children` prop이나 렌더 프롭(render props)을 통해 컴포넌트를 구성하면, 기존 코드를 손상시키지 않고도 새로운 기능을 쉽게 확장할 수 있습니다 [2, 3].
* **기능 분할 설계(Feature-Sliced Design)에서의 역할:** 확장성을 위한 FSD 아키텍처에서 합성은 명확한 책임을 가집니다. '위젯(Widgets)' 레이어는 비즈니스 규칙을 직접 구현하지 않고, 하위의 '기능(Features)'과 '엔티티(Entities)'를 재사용 가능한 UI 블록으로 합성(compose)하여 오케스트레이션하는 역할을 수행합니다 [4]. 그 위 레이어인 '페이지(Pages)'와 '앱(App)' 역시 위젯들을 모아 전체 화면과 글로벌 설정을 합성하는 역할을 맡습니다 [4, 5].
* **서버 및 클라이언트 컴포넌트의 합성:** Next.js의 App Router와 같은 최신 아키텍처에서는 React 서버 컴포넌트(RSC)가 일반 클라이언트 컴포넌트와 원활하게 합성될 수 있습니다 [6]. 이를 통해 정적인 UI는 서버에서 렌더링하고, 상호작용이 필요한 부분만 클라이언트 컴포넌트로 분리하여 결합할 수 있습니다.

## 🔗 Knowledge Connections
- **Related Topics:** [[Open/Closed Principle (OCP)]], [[Feature-Sliced Design (FSD)]], [[JSX]], [[React Server Components]]
- **Projects/Contexts:** [[Scalable React Architecture]], [[Frontend System Design]]
- **Contradictions/Notes:** 컴포넌트 합성에 대해 소스 간의 모순점은 발견되지 않았으며, 제공된 자료들은 모두 합성이 코드의 재사용성을 높이고 아키텍처의 결합도를 낮추는 핵심 원칙이라는 점에 동의하고 있습니다.

---
*Last updated: 2026-04-26*