2nd/10_Wiki/Topics/Architecture/Arrangement-and-Composition.md

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-arrangement-and-composition	Arrangement and Composition	10_Wiki/Topics	verified	self	composition-over-inheritance function-composition ui-composition	none	A	0.9	applied	composition design architecture functional		2026-05-10	pending	language framework typescript 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)

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)

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

// "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

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)

cat access.log \
  | grep '\.html"' \
  | awk '{print $7}' \
  | sort \
  | uniq -c \
  | sort -rn \
  | head -20

DAG composition (Airflow / Dagster)

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)

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)

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