---
id: wiki-2026-0508-arrangement-and-composition
title: Arrangement and Composition
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [composition-over-inheritance, function-composition, ui-composition]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [composition, design, architecture, functional]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: typescript
  framework: react
---

# Arrangement and Composition

## 매 한 줄
> **"매 small piece 의 arrange 의 emergent capability 의 만든다"**. 매 *Design Patterns* (GoF, 1994) 의 "favor composition over inheritance" 의 most-cited principle. 매 2026 의 React Server Components, Unix pipes, fp-ts pipe, kubernetes operator composition 의 same idea 의 different incarnation.

## 매 핵심

### 매 composition modes
- **Function composition**: `f ∘ g` — output 의 input 의 chain.
- **Object composition**: 매 has-a > is-a — delegation, mixin, trait.
- **Component composition**: 매 React/Vue children, slot. 매 layout 의 declarative.
- **Process composition**: 매 Unix pipes, k8s sidecar, DAG (Airflow).
- **Type composition**: 매 union, intersection, generics.

### 매 arrangement axes
- **Horizontal**: 매 sibling 의 parallel — fan-out / fan-in.
- **Vertical**: 매 layer / pipeline — sequential.
- **Tree**: 매 hierarchy — 매 component tree / DOM.
- **Graph**: 매 arbitrary edges — 매 dataflow / DAG.

### 매 응용
1. UI — 매 component slot, render prop, children-as-function.
2. Data pipeline — 매 dbt model graph, Airflow DAG.
3. Function-level — 매 pipe / compose / Result.flatMap.
4. Service mesh — 매 sidecar composition (Envoy + app).

## 💻 패턴

### Function composition (TypeScript / fp-ts)
```ts
import { pipe, flow } from 'fp-ts/function';

const trim = (s: string) => s.trim();
const lower = (s: string) => s.toLowerCase();
const slug = (s: string) => s.replace(/\s+/g, '-');

const slugify = flow(trim, lower, slug);  // point-free
const out = pipe('  Hello World ', trim, lower, slug); // value-first
console.log(slugify('  Hello World ')); // "hello-world"
```

### Composition over inheritance (Go — embedding)
```go
type Logger struct{ prefix string }
func (l Logger) Log(msg string) { fmt.Println(l.prefix, msg) }

type Counter struct{ n int }
func (c *Counter) Inc() { c.n++ }

// HTTP server composes both — no inheritance
type Server struct {
  Logger    // embedded → Server.Log() works
  *Counter  // embedded pointer
  addr string
}

s := &Server{Logger: Logger{"[srv]"}, Counter: &Counter{}, addr: ":8080"}
s.Log("starting"); s.Inc()
```

### React component composition
```tsx
// "Slot" composition — children as primary API
function Card({ header, footer, children }: {
  header?: ReactNode; footer?: ReactNode; children: ReactNode;
}) {
  return (
    <div className="card">
      {header && <header>{header}</header>}
      <main>{children}</main>
      {footer && <footer>{footer}</footer>}
    </div>
  );
}

<Card
  header={<h2>Order #1234</h2>}
  footer={<button>Cancel</button>}
>
  <OrderDetails id="1234" />
</Card>
```

### Higher-order component / wrapper composition
```tsx
const withAuth = <P,>(C: ComponentType<P>) =>
  (props: P) => useUser() ? <C {...props} /> : <Login />;

const withLogging = <P,>(C: ComponentType<P>, name: string) =>
  (props: P) => { console.log(name, props); return <C {...props} />; };

// Compose
const Page = withAuth(withLogging(Dashboard, 'Dashboard'));
```

### Unix pipes (process composition)
```bash
cat access.log \
  | grep '\.html"' \
  | awk '{print $7}' \
  | sort \
  | uniq -c \
  | sort -rn \
  | head -20
```

### DAG composition (Airflow / Dagster)
```python
from dagster import asset

@asset
def raw_orders(): return load_csv("orders.csv")

@asset
def cleaned_orders(raw_orders): return raw_orders.dropna()

@asset
def daily_revenue(cleaned_orders):
    return cleaned_orders.groupby("day")["total"].sum()
# Dagster builds DAG from inputs → outputs automatically
```

### Type composition (TypeScript)
```ts
type Timestamped = { createdAt: Date; updatedAt: Date };
type Identified = { id: string };
type Soft Deletable = { deletedAt: Date | null };

// Intersection composition
type Entity<T> = T & Identified & Timestamped & SoftDeletable;
type User = Entity<{ email: string; name: string }>;
```

### Algebraic composition — Result.flatMap (Rust)
```rust
fn parse(s: &str) -> Result<i32, String> { s.parse().map_err(|e| e.to_string()) }
fn double(n: i32) -> Result<i32, String> { Ok(n * 2) }
fn check_positive(n: i32) -> Result<i32, String> {
    if n > 0 { Ok(n) } else { Err("non-positive".into()) }
}

let out: Result<i32, _> = parse("21")
    .and_then(double)
    .and_then(check_positive);  // composition via and_then
```

## 매 결정 기준
| 상황 | Mode |
|---|---|
| Shared state across siblings | Composition (props / context) > inheritance |
| Behavior reuse, no state | Mixin / trait / function |
| Conditional capability | HOC / decorator |
| Linear pipeline | pipe / compose |
| Branching workflow | DAG (Dagster, Airflow) |
| Multi-axis variation | Strategy / Plugin |

**기본값**: 매 favor composition — 매 inheritance 의 only 매 strict is-a + immutable hierarchy.

## 🔗 Graph
- 부모: [[Design Patterns]] · [[Functional Programming]]
- 변형: [[Composition over Inheritance]]
- 응용: [[React]] · [[Airflow]]
- Adjacent: [[Base_Layouts]] · [[Architectural-Constraint-Enforcement]]

## 🤖 LLM 활용
**언제**: 매 inheritance hierarchy → composition 의 refactor suggestion, 매 pipeline의 DAG 의 visualize.
**언제 X**: 매 deep domain modeling — 매 human 의 boundary judgment 의 필수.

## ❌ 안티패턴
- **Inheritance for code reuse**: 매 fragile base class — 매 composition 의 사용.
- **Composition explosion**: 매 100-deep wrapper — 매 readability 의 X. 매 refactor.
- **God component**: 매 50-prop slot — 매 split.
- **Implicit composition order**: 매 HOC stacking 의 order-dependent — 매 explicit naming.

## 🧪 검증 / 중복
- Verified (Gamma et al., *Design Patterns*; React docs — composition vs inheritance; Wadler — *Theorems for Free*).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — function/object/component/process composition patterns |