컴포지트 패턴

객체들을 트리구조로 구성하여 부분-전체 계층 구조로 표현할수 있도록 하는 패턴

• 컴포지트 패턴은 특정 객체들이 다른 객체들을 포함할 수 있는 구조를 단순하고 유연하게 관리할 수 있다.

• 클라이언트가 개별 객체와 복합 객체를 구분하지 않고 똑같은 방법으로 다룰수 있게 해줌 → 투명성

  • 복합 구조에 들어있는 것을 컴포넌트라 부르고, 컴포넌트에는 복합 객체와 개별 객체가 있음

  • 복합 객쳬(Composite): 여러 개별 객체나 복합 객체를 자식으로 포함하는 객체

  • 개별 객체(Leaf): 하위 요소를 갖지 않는 단일 객체

• 간단하게 똑같은 작업을 전체 메뉴 구조를 대상으로 반복(재귀)해서 적용 가능

• 클라이언트 코드를 단순화시킬 수 있음

  • 클라이언트는 복합 객체를 사용하고 있는지, 개별 객체를 사용하고 있는지를 신경쓰지 않아도됨

  • 즉, 여기저기 조건문을 작성하지 않아도 되고, 메소드 하나로 전체 구조의 반복문을 간단하게 실행 가능

• 컴포지트 패턴은 상황에 따라 투명성과 안전성 사이에서 적절한 균형을 찾아야함

  • 컴포지트 패턴은 복합 객체와 개별 객체를 동일하게 다루기 위해서 단일 책임 원칙(계층구조 관리와 비즈니스 동작 2가지 책임을 포함)을 깨는 대신 투명성을 확보하는 패턴

  • 클라이언트가 어떤 원소를 대상으로 부적절한 작업(필요없는 작업)을 처리하는 코드를 작성할 수 있게 됨

💡 자식원소가 있는 원소는 노드(node)라 부른다.

💡 부분-전체 계층구조란, 부분들이 계층을 이루고 있지만 모든 부분을 묶어서 전체로 다룰 수 있는 구조

---

개별 객체와 복합 객체를 모두 담아둘 수 있는 구조를 제공

솔리드 원칙중 인터페이스 분리 원칙에 위배됨, 다만 실무에서는 클래스들의 일관성을 유지해야하거나, 시스템의 규모가 작을 떄 이렇게 작성하기도함

1. 컴포넌트 인터페이스

interface UIComponent {
  render(): void
  add(component: UIComponent): void
  remove(component: UIComponent): void
}

2. 리프 객체

class Button implements UICompoennt {
  constructor(private label: string) {}
  
  render(): void {
    console.log(`Button: ${this.label}`)
  }
  
  add(component: UIComponent): void {
    throw new Error("does not support add operation")
  }
  
  remove(component: UIComponent): void {
    throw new Error('does not support remove operation")
  }
}

3. 복합 객체

class Panel implements UIComponent {
  private components: UIComponent[] = []

  constructor(private name: string) {}
  
  render(): void {
    console.log(`Panel: ${this.name}`)
    this.components.forEach((comp) => comp.render())
  }
  
  add(component: UIComponent): void {
    this.components.push(component)
  }
  
  remove(component: UIComponent): void {
    this.components = this.components.filter((comp) => comp !== component)
  }
}

4. 클라이언트 코드

const submitButton = new Button("Submit")
const cancelButton = new Button("Cancel")

const panel = new Panel("Form")

panel.add(submitButton)
panel.add(cancelButton)

panel.render()