2nd/10_Wiki/Topics/Architecture/Component-Based Architecture (CBA).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-component-based-architecture-cba	Component Based Architecture (CBA)	10_Wiki/Topics	verified	self	CBA Component-Based Software Engineering CBSE	none	A	0.9	applied	architecture components modularity reuse		2026-05-10	pending	language framework typescript 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

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)

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

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

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)

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

// 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 · 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 패턴