컴포지트 composite 패턴 - 자바스크립트 예제

컴포지트 패턴 요약

컴포지트 패턴은 객체들을 트리 구조로 구성하여 '부분-전체' 계층을 표현하는 디자인 패턴입니다. 이 패턴을 사용하면 클라이언트가 개별 객체(Leaf)와 복합 객체(Composite)를 동일한 방식으로 다룰 수 있습니다. 즉, 단일 객체이든 여러 객체로 이루어진 집합이든 똑같은 인터페이스로 제어할 수 있게 됩니다.

가장 대표적인 예는 컴퓨터의 파일 시스템입니다. 폴더(복합 객체) 안에는 다른 폴더나 파일(개별 객체)이 들어갈 수 있습니다. 사용자는 폴더와 파일을 구분하지 않고 '이름 변경', '삭제' 등의 동일한 작업을 수행할 수 있습니다.

기본 구조

• Component: Leaf와 Composite가 모두 구현해야 하는 공통 인터페이스입니다. 트리 구조의 모든 객체에 대한 일관된 작업을 정의합니다.
• Leaf: 트리의 가장 말단에 있는 개별 객체입니다. 자식을 가지지 않습니다. (예: 파일)
• Composite: 자식(Leaf 또는 다른 Composite)을 가질 수 있는 복합 객체입니다. 자식들을 관리하는 메서드(add, remove 등)를 구현하며, Component 인터페이스의 메서드를 자식들에게 재귀적으로 전달합니다. (예: 폴더)

예시: 파일 시스템 표현하기

파일과 폴더로 구성된 간단한 파일 시스템을 컴포지트 패턴으로 구현해 보겠습니다.

출력 결과:

클라이언트는 root 폴더 객체 하나만 가지고 display()를 호출했을 뿐인데, 전체 트리 구조가 재귀적으로 출력되는 것을 볼 수 있습니다. 클라이언트는 File과 Folder의 내부 구조 차이를 신경 쓸 필요 없이 FileSystemComponent라는 단일 인터페이스를 통해 동일하게 상호작용할 수 있습니다.

컴포지트 패턴 중요 키워드

• 트리 구조로 '부분-전체' 계층을 표현합니다.
• 단일 객체(Leaf)와 복합 객체(Composite)를 동일하게 취급합니다.
• 재귀적 구조를 통해 클라이언트 코드를 단순화합니다.
• UI 툴킷, 파일 시스템 등 계층적 구조를 다룰 때 매우 유용합니다.