컴포지트 composite 패턴 - 자바스크립트 예제
SW설계디자인패턴
읽는데 4분 소요
처음 쓰여진 날: 2025-09-01
마지막 수정일: 2025-09-01
조회수: —
선수학습(1개)
요약
컴포지트(Composite) 패턴을 자바스크립트 코드와 함께 알아봅니다. 정보처리기사 대비 문제가 포함되어있습니다.
컴포지트 패턴 요약
| 패턴 종류 | 핵심 키워드 |
|---|---|
| 컴포지트 (Composite) | 트리 구조, 부분-전체 계층 표현 |
컴포지트 패턴은 객체들을 트리 구조로 구성하여 '부분-전체' 계층을 표현하는 디자인 패턴입니다. 이 패턴을 사용하면 클라이언트가 개별 객체(Leaf)와 복합 객체(Composite)를 동일한 방식으로 다룰 수 있습니다. 즉, 단일 객체이든 여러 객체로 이루어진 집합이든 똑같은 인터페이스로 제어할 수 있게 됩니다.
가장 대표적인 예는 컴퓨터의 파일 시스템입니다. 폴더(복합 객체) 안에는 다른 폴더나 파일(개별 객체)이 들어갈 수 있습니다. 사용자는 폴더와 파일을 구분하지 않고 '이름 변경', '삭제' 등의 동일한 작업을 수행할 수 있습니다.
기본 구조
- Component: Leaf와 Composite가 모두 구현해야 하는 공통 인터페이스입니다. 트리 구조의 모든 객체에 대한 일관된 작업을 정의합니다.
- Leaf: 트리의 가장 말단에 있는 개별 객체입니다. 자식을 가지지 않습니다. (예: 파일)
- Composite: 자식(Leaf 또는 다른 Composite)을 가질 수 있는 복합 객체입니다. 자식들을 관리하는 메서드(add, remove 등)를 구현하며, Component 인터페이스의 메서드를 자식들에게 재귀적으로 전달합니다. (예: 폴더)
예시: 파일 시스템 표현하기
파일과 폴더로 구성된 간단한 파일 시스템을 컴포지트 패턴으로 구현해 보겠습니다.
javascript
코드 하이라이팅 중…
출력 결과:
text
코드 하이라이팅 중…
클라이언트는 root 폴더 객체 하나만 가지고 display()를 호출했을 뿐인데, 전체 트리 구조가 재귀적으로 출력되는 것을 볼 수 있습니다. 클라이언트는 File과 Folder의 내부 구조 차이를 신경 쓸 필요 없이 FileSystemComponent라는 단일 인터페이스를 통해 동일하게 상호작용할 수 있습니다.
컴포지트 패턴 중요 키워드
- 트리 구조로 '부분-전체' 계층을 표현합니다.
- 단일 객체(Leaf)와 복합 객체(Composite)를 동일하게 취급합니다.
- 재귀적 구조를 통해 클라이언트 코드를 단순화합니다.
- UI 툴킷, 파일 시스템 등 계층적 구조를 다룰 때 매우 유용합니다.