2nd/10_Wiki/Topics/Architecture/Component-Based Architecture (CBA).md

---
id: wiki-2026-0508-component-based-architecture-cba
title: Component Based Architecture (CBA)
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [CBA, Component-Based Software Engineering, CBSE]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [architecture, components, modularity, reuse]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: typescript
  framework: react-vue-angular
---

# Component Based Architecture (CBA)

## 매 한 줄
> **"매 시스템 = 매 independent, replaceable, composable component 의 합."**. CBSE는 1960s OOP의 reuse 약속을 modular contract로 실현한 패러다임. 2026년 frontend (React/Vue/Angular), microservices, design systems, embedded (OSGi), game engines (Unity ECS) 모두 CBA의 변형.

## 매 핵심

### 매 component 의 정의
- **Encapsulation**: state + behavior + interface = 단일 unit.
- **Well-defined contract**: input props/events, output events, side effects 명시.
- **Replaceable**: 동일 interface 의 다른 impl 으로 swap 가능.
- **Independently deployable** (microservices) 또는 **independently versionable** (libraries).

### 매 4 properties (Szyperski)
1. **Independent deployment** unit.
2. **Composition** by third parties.
3. **No persistent state** (pure or state-injected).
4. **Explicit context dependencies** (interface 로 명시).

### 매 응용
1. Frontend UI (React component tree).
2. Microservices (service = component).
3. Plugin systems (VSCode extensions, Figma plugins).
4. Game engines (Unity GameObject + Components).
5. Web Components (Custom Elements, Shadow DOM).

## 💻 패턴

### React functional component
```typescript
type ButtonProps = {
  variant: 'primary' | 'ghost';
  onClick: () => void;
  children: React.ReactNode;
};

export function Button({ variant, onClick, children }: ButtonProps) {
  return (
    <button
      className={`btn btn-${variant}`}
      onClick={onClick}
    >
      {children}
    </button>
  );
}
```

### Web Component (framework-agnostic)
```typescript
class TodoItem extends HTMLElement {
  static observedAttributes = ['done', 'label'];

  attributeChangedCallback(name: string, _old: string, value: string) {
    this.render();
  }

  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.render();
  }

  private render() {
    if (!this.shadowRoot) return;
    const done = this.hasAttribute('done');
    this.shadowRoot.innerHTML = `
      <style>:host { display: block; }</style>
      <label>
        <input type="checkbox" ${done ? 'checked' : ''} />
        <span>${this.getAttribute('label') ?? ''}</span>
      </label>
    `;
  }
}
customElements.define('todo-item', TodoItem);
```

### Composition over inheritance
```typescript
// Bad: deep inheritance
class AdminButton extends IconButton extends Button { }

// Good: composition
function AdminButton({ icon, ...rest }: AdminButtonProps) {
  return (
    <Button {...rest}>
      <Icon name={icon} />
      <span>{rest.children}</span>
    </Button>
  );
}
```

### Dependency injection (explicit context)
```typescript
type Logger = { info(msg: string): void };

export function createPaymentService({ logger, gateway }: {
  logger: Logger;
  gateway: PaymentGateway;
}) {
  return {
    charge: async (amount: number) => {
      logger.info(`charging ${amount}`);
      return gateway.charge(amount);
    },
  };
}
```

### ECS component (Unity / Bevy style)
```rust
// Bevy ECS
#[derive(Component)]
struct Position { x: f32, y: f32 }

#[derive(Component)]
struct Velocity { dx: f32, dy: f32 }

fn movement_system(mut query: Query<(&mut Position, &Velocity)>) {
    for (mut pos, vel) in &mut query {
        pos.x += vel.dx;
        pos.y += vel.dy;
    }
}
```

### Microservice as component
```typescript
// Each service exposes a typed contract (gRPC / OpenAPI)
interface OrderService {
  createOrder(req: CreateOrderRequest): Promise<Order>;
  getOrder(id: string): Promise<Order>;
}

// Replaceable impl: REST, gRPC, in-memory mock
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| UI rendering | React/Vue functional components |
| Cross-framework UI | Web Components (Lit) |
| Backend domain split | Microservice components (gRPC contract) |
| Game logic | ECS components (Bevy, Unity DOTS) |
| Plugin systems | Component + manifest + sandbox (VSCode model) |

**기본값**: React 19 functional components + composition; backend은 module 단위 component → 필요 시 microservice 로 추출.

## 🔗 Graph
- 부모: [[Modularity]] · [[Software Architecture]]
- 변형: [[Microservices]] · [[Web Components]] · [[Entity Component System]]
- 응용: [[Component Library Architecture]] · [[Component-Composition|Compound Components]] · [[Design Systems]]
- Adjacent: [[Conceptual Integrity]] · [[Dependency Injection]]

## 🤖 LLM 활용
**언제**: UI/system 의 reusable units 으로 분해, contract-driven team work, plugin ecosystem.
**언제 X**: 단일 prototype, throwaway script, 하나의 tight algorithm (component overhead 가 cost > benefit).

## ❌ 안티패턴
- **God component**: 하나의 component 가 too many props/responsibilities — split.
- **Prop drilling**: 5+ levels 깊이 prop 전달 — Context/store 로 lift.
- **Hidden coupling**: component A 가 component B 의 internal state 의 직접 접근 — contract violation.
- **Premature genericization**: 1번만 쓰는 것을 generic 으로 추상화 — YAGNI.

## 🧪 검증 / 중복
- Verified (Szyperski "Component Software" 1998 / Brooks 1995 / React docs 2026).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — CBA 4-property canonical + React/ECS/microservice 패턴 |