2nd/10_Wiki/Topics/Domain_Programming/From_RawData/Component Composition.md

---
id: component-composition
title: "Component Composition"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["컴포넌트 합성", "Component Composition", "컴포지션", "React Component Composition"]
duplicate_of: ""
source_trust_level: "A"
confidence_score: 0.95
created_at: 2026-07-11
updated_at: 2026-07-11
review_reason: ""
merge_history: []
tags: ["research", "context 이해 규칙"]
raw_sources: ["[S1] Context - React"]
applied_in: []
github_commit: ""
---

# [[Component Composition]]

## 🎯 한 줄 통찰 (One-line insight)
컴포넌트 합성(Component Composition)은 깊게 중첩된 컴포넌트로 props를 전달하는 과정에서 발생하는 불필요한 의존성을 제어의 역전(Inversion of Control)을 통해 해결하는, React Context의 단순하고 강력한 대안 패턴이다.

## 🧠 핵심 개념 (Core concepts)
1. **Props 전달 문제(Prop-drilling) 방지**: 하위 컴포넌트에서만 필요한 데이터를 위해 중간 단계의 컴포넌트들이 불필요한 props를 전달받고 알아야 하는 문제를 해결한다.
2. **제어의 역전(Inversion of control)**: 하위 컴포넌트의 렌더링과 필요한 데이터 매핑에 대한 제어권을 최상위 루트 컴포넌트로 끌어올려 코드를 더 깔끔하게 유지한다.
3. **직계 부모로부터의 분리(Decoupling)**: 데이터를 전달하는 대신 완성된 자식 컴포넌트 자체나 분리된 '슬롯(slots)'을 상위에서 하향 전달하여 결합도를 낮춘다.

## 🧩 추출된 패턴 (Extracted patterns)
- **컴포넌트 자체의 하향 전달 (Passing components as props)**: 깊이 중첩된 하위 컴포넌트(예: `Avatar`)에 데이터를 넘기기 위해 중간 계층을 거치는 대신, 최상위 컴포넌트에서 `<Avatar user={user} size={avatarSize} />`와 같이 컴포넌트를 직접 렌더링한 후 중간 컴포넌트에게 이를 prop 자체로 넘겨주는 패턴.
- **다중 자식 및 슬롯(Slots) 패턴**: 컴포넌트에 하나의 자식(children)만 허용하는 것이 아니라, 다수의 자식 요소나 여러 개의 개별 슬롯 구조를 넘겨주어 직계 부모 컴포넌트가 자식의 구현체를 직접 알 필요가 없도록 디커플링하는 전략.

## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)

| 항목 (Option) | 장점 | 단점 | 언제 선택 |
|---|---|---|---|
| **Component Composition** | 어플리케이션을 통과하는 props의 양 감소, 코드의 깔끔함 증가, 최상위 컴포넌트 제어권 강화 [S1] | 상위 트리로 복잡성이 집중됨, 하위 컴포넌트에 원치 않는 유연성을 강제할 수 있음 [S1] | 단지 여러 레벨을 거쳐 props가 전달되는 것만 피하고 싶을 때 (Context 도입 전 우선 고려) [S1] |
| **React Context** | 깊이 중첩된 컴포넌트 트리의 어느 곳에서나 명시적인 props 전달 없이 데이터(값) 접근 가능 [S1] | 컴포넌트의 결합도가 높아져 재사용을 더 어렵게 만듦 [S1] | 다수의 컴포넌트가 다양한 중첩 레벨에서 동일한 데이터(예: 현재 로케일, 테마, 데이터 캐시 등)에 접근해야 할 때 [S1] |

## 📖 세부 내용 (Details)
- React에서 여러 계층의 컴포넌트를 거쳐 데이터를 전달해야 하는 문제(Props Drilling)를 직면했을 때, 무분별하게 Context API를 사용하기에 앞서 고려해야 할 더 단순하고 효과적인 해결책이 바로 컴포넌트 합성(Component Composition)이다 [S1].
- 특정 데이터(예: `user`, `avatarSize` 등)가 트리 하단의 특정 컴포넌트에서만 실질적으로 필요함에도 불구하고, 중간 단계의 컴포넌트들이 이를 모두 전달받기 위해 데이터 구조를 파악해야 하는 것은 코드의 중복을 낳고 컴포넌트 재사용성을 떨어뜨린다 [S1].
- 이 문제를 Context에 의존하지 않고 해결하는 방법은 하위 컴포넌트 자체를 상위 컴포넌트에서 완성하여 중간 컴포넌트에게 prop으로 통째로 전달하는 것이다 [S1].
- 이를 통해 중간 컴포넌트들은 해당 데이터의 존재를 알 필요가 없게 되며, 오로지 자신이 렌더링할 구조적인 역할만 수행하게 된다 [S1].
- 이러한 제어의 역전(Inversion of Control)은 어플리케이션의 중간 과정을 통과하는 props의 절대적인 양을 줄여주어 코드를 깔끔하게 하고, 최상위 컴포넌트에게 더 많은 제어권을 부여하는 이점을 제공한다 [S1].
- 다만, 상위 트리에 더 많은 복잡성이 이동하여 최상위 컴포넌트가 무거워질 수 있으며, 하위 컴포넌트가 의도치 않게 지나친 유연성을 수용해야 하는 상황이 발생할 수 있으므로 모든 아키텍처에 무조건적으로 적합한 것은 아니다 [S1].
- 컴포넌트 합성은 단일 자식 요소(`children`)에 국한되지 않으며, 여러 개의 자식이나 분리된 '슬롯(slots)' 형태로 컴포넌트를 주입하는 방식을 통해 직계 부모로부터 자식을 디커플링(decouple)하는 폭넓은 패턴으로 활용할 수 있다 [S1].

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
소스 내에 상충되는 정보는 발견되지 않았으나, 컴포넌트 합성이 Context의 완벽한 대체재는 아님이 강조된다. 단순히 깊은 props 전달을 피하는 목적이라면 합성을 우선시하되, 테마나 로케일처럼 앱 전반에 걸쳐 '글로벌'하게 브로드캐스트되어야 하는 데이터는 Context를 사용하는 것이 올바른 용례로 구분된다 [S1].

## 🛠️ 적용 사례 (Applied in summary)
현재 발견된 실제 적용 사례가 없습니다. (소스 내에서 구체적인 적용 프로젝트 레포지토리나 커밋 해시 등은 제공되지 않음)

## 💻 코드 패턴 (Code patterns)
소스에 코드 예시 없음. (제공된 소스 텍스트 상에서 `Page`, `Link`, `Avatar` 컴포넌트 간의 관계를 설명하는 텍스트만 존재할 뿐, 실제 렌더링 가능한 컴포넌트 코드 스니펫 블록은 누락되어 있음)

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual
- **출처 신뢰도:** A
- **신뢰 점수:** 0.95
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[context 이해 규칙]]
- **관련 개념:** [[React Context]], [[Props Drilling]]
- **참조 맥락:** React 어플리케이션 아키텍처 설계 시, 전역 상태 관리 및 Context API 도입 이전에 불필요한 props 전달 문제를 해결하기 위한 컴포넌트 계층 최적화 단계에서 참조됨.

## 📚 출처 (Sources)
- [S1] Context - React (https://legacy.reactjs.org/docs/context.html)

## 📝 변경 이력 (Change history)
- 2026-07-11: Initial draft generated via Datacollector_MAC P-Reinforce engine.