🎯컴포지트(Composite) 패턴 완벽 가이드: Java와 TypeScript 예제로 마스터하기

🌳 Composite 패턴: 복잡한 구조를 단순하게 다루는 디자인 패턴

📋 개요

Composite 패턴은 객체들을 트리 구조로 구성하여 전체-부분 계층을 표현하는 구조적 디자인 패턴입니다. 이 패턴을 사용하면 클라이언트가 개별 객체와 객체들의 조합을 동일하게 다룰 수 있습니다.

🔑 핵심 개념

Composite 패턴의 핵심은 단일 객체와 복합 객체를 동일한 인터페이스로 처리할 수 있다는 점입니다. 이를 통해 복잡한 트리 구조를 간단하고 일관된 방식으로 조작할 수 있습니다.

🧩 구성 요소

1. 📄 Component: 트리의 객체들에 대한 인터페이스를 정의
2. 🍃 Leaf: 트리의 잎 노드를 나타내며, 자식이 없는 객체
3. 📦 Composite: 자식들을 가지는 컴포넌트의 행동을 정의하고 자식 컴포넌트들을 저장

⚖️ 장점과 단점

✅ 장점

• 일관된 인터페이스: 단일 객체와 복합 객체를 동일하게 처리
• 확장성: 새로운 종류의 컴포넌트를 쉽게 추가 가능
• 투명성: 클라이언트 코드가 단순해짐

⚠️ 단점

• 타입 안전성: 컴포넌트의 타입을 제한하기 어려움
• 복잡성: 디자인이 지나치게 일반적이 될 수 있음

🏢 실제 예제 1: 회사 조직도 (Java)

회사의 조직 구조를 Composite 패턴으로 구현해보겠습니다.

// Component 인터페이스
interface Employee {
    void showDetails();
    double getSalary();
    void add(Employee employee);
    void remove(Employee employee);
}

// Leaf 클래스 - 일반 직원
class Developer implements Employee {
    private String name;
    private double salary;
    private String technology;
    
    public Developer(String name, double salary, String technology) {
        this.name = name;
        this.salary = salary;
        this.technology = technology;
    }
    
    @Override
    public void showDetails() {
        System.out.println("Developer: " + name + ", Salary: " + salary + 
                          ", Tech: " + technology);
    }
    
    @Override
    public double getSalary() {
        return salary;
    }
    
    @Override
    public void add(Employee employee) {
        throw new UnsupportedOperationException("개발자는 직원을 추가할 수 없습니다.");
    }
    
    @Override
    public void remove(Employee employee) {
        throw new UnsupportedOperationException("개발자는 직원을 제거할 수 없습니다.");
    }
}

// Composite 클래스 - 매니저
class Manager implements Employee {
    private String name;
    private double salary;
    private List<Employee> subordinates;
    
    public Manager(String name, double salary) {
        this.name = name;
        this.salary = salary;
        this.subordinates = new ArrayList<>();
    }
    
    @Override
    public void showDetails() {
        System.out.println("Manager: " + name + ", Salary: " + salary);
        System.out.println("팀원들:");
        for (Employee emp : subordinates) {
            System.out.print("  ");
            emp.showDetails();
        }
    }
    
    @Override
    public double getSalary() {
        double totalSalary = salary;
        for (Employee emp : subordinates) {
            totalSalary += emp.getSalary();
        }
        return totalSalary;
    }
    
    @Override
    public void add(Employee employee) {
        subordinates.add(employee);
    }
    
    @Override
    public void remove(Employee employee) {
        subordinates.remove(employee);
    }
}

// 사용 예제
public class CompanyExample {
    public static void main(String[] args) {
        // 개발자들 생성
        Employee dev1 = new Developer("김개발", 5000, "Java");
        Employee dev2 = new Developer("이프론트", 4800, "React");
        Employee dev3 = new Developer("박백엔드", 5200, "Spring");
        
        // 팀장 생성
        Employee teamLead = new Manager("최팀장", 7000);
        teamLead.add(dev1);
        teamLead.add(dev2);
        
        // 부서장 생성
        Employee deptHead = new Manager("정부장", 10000);
        deptHead.add(teamLead);
        deptHead.add(dev3);
        
        // 조직도 출력
        System.out.println("=== 조직도 ===");
        deptHead.showDetails();
        
        System.out.println("\n=== 총 급여 ===");
        System.out.println("부서 전체 급여: " + deptHead.getSalary());
    }
}

🖥️ 실제 예제 2: UI 컴포넌트 시스템 (TypeScript)

웹 UI의 컴포넌트 구조를 Composite 패턴으로 구현해보겠습니다.

// Component 인터페이스
interface UIComponent {
    render(): string;
    getSize(): number;
    add?(component: UIComponent): void;
    remove?(component: UIComponent): void;
}

// Leaf 클래스 - 기본 UI 요소들
class Button implements UIComponent {
    constructor(private text: string, private onClick: string) {}
    
    render(): string {
        return `<button onclick="${this.onClick}">${this.text}</button>`;
    }
    
    getSize(): number {
        return 1; // 기본 컴포넌트 크기
    }
}

class TextInput implements UIComponent {
    constructor(private placeholder: string, private name: string) {}
    
    render(): string {
        return `<input type="text" name="${this.name}" placeholder="${this.placeholder}" />`;
    }
    
    getSize(): number {
        return 1;
    }
}

class Label implements UIComponent {
    constructor(private text: string) {}
    
    render(): string {
        return `<label>${this.text}</label>`;
    }
    
    getSize(): number {
        return 1;
    }
}

// Composite 클래스 - 컨테이너들
class Panel implements UIComponent {
    private components: UIComponent[] = [];
    
    constructor(private cssClass: string = '') {}
    
    add(component: UIComponent): void {
        this.components.push(component);
    }
    
    remove(component: UIComponent): void {
        const index = this.components.indexOf(component);
        if (index > -1) {
            this.components.splice(index, 1);
        }
    }
    
    render(): string {
        const content = this.components
            .map(component => component.render())
            .join('\n    ');
        
        const classAttr = this.cssClass ? ` class="${this.cssClass}"` : '';
        return `<div${classAttr}>\n    ${content}\n</div>`;
    }
    
    getSize(): number {
        return this.components.reduce((total, component) => 
            total + component.getSize(), 0);
    }
}

class Form implements UIComponent {
    private components: UIComponent[] = [];
    
    constructor(private action: string, private method: string = 'POST') {}
    
    add(component: UIComponent): void {
        this.components.push(component);
    }
    
    remove(component: UIComponent): void {
        const index = this.components.indexOf(component);
        if (index > -1) {
            this.components.splice(index, 1);
        }
    }
    
    render(): string {
        const content = this.components
            .map(component => component.render())
            .join('\n    ');
        
        return `<form action="${this.action}" method="${this.method}">\n    ${content}\n</form>`;
    }
    
    getSize(): number {
        return this.components.reduce((total, component) => 
            total + component.getSize(), 0);
    }
}

// 사용 예제
class UIExample {
    static createLoginForm(): UIComponent {
        // 기본 컴포넌트들 생성
        const usernameLabel = new Label('사용자명:');
        const usernameInput = new TextInput('사용자명을 입력하세요', 'username');
        const passwordLabel = new Label('비밀번호:');
        const passwordInput = new TextInput('비밀번호를 입력하세요', 'password');
        const loginButton = new Button('로그인', 'handleLogin()');
        const cancelButton = new Button('취소', 'handleCancel()');
        
        // 사용자명 필드 패널
        const usernamePanel = new Panel('form-field');
        usernamePanel.add(usernameLabel);
        usernamePanel.add(usernameInput);
        
        // 비밀번호 필드 패널
        const passwordPanel = new Panel('form-field');
        passwordPanel.add(passwordLabel);
        passwordPanel.add(passwordInput);
        
        // 버튼 패널
        const buttonPanel = new Panel('button-group');
        buttonPanel.add(loginButton);
        buttonPanel.add(cancelButton);
        
        // 전체 폼
        const loginForm = new Form('/login');
        loginForm.add(usernamePanel);
        loginForm.add(passwordPanel);
        loginForm.add(buttonPanel);
        
        return loginForm;
    }
    
    static main(): void {
        const loginForm = UIExample.createLoginForm();
        
        console.log('=== 로그인 폼 HTML ===');
        console.log(loginForm.render());
        
        console.log('\n=== 컴포넌트 개수 ===');
        console.log(`총 컴포넌트 수: ${loginForm.getSize()}`);
    }
}

// 실행
UIExample.main();

🤔 언제 사용해야 할까?

Composite 패턴은 다음과 같은 상황에서 유용합니다:

1. 🌲 트리 구조 표현: 전체-부분 계층 구조를 표현해야 할 때
2. 🔄 일관된 처리: 개별 객체와 객체 그룹을 동일하게 처리하고 싶을 때
3. 🔁 재귀적 구조: 중첩된 구조를 간단하게 처리하고 싶을 때

🌍 실제 활용 사례

• ⚛️ UI 프레임워크: React, Vue 등의 컴포넌트 시스템
• 🎨 그래픽 시스템: 도형들의 그룹화 처리
• 📁 파일 시스템: 폴더와 파일의 계층 구조
• 👥 조직도: 회사나 팀의 계층 구조
• 📋 메뉴 시스템: 중첩된 메뉴 구조

🎯 결론

Composite 패턴은 복잡한 트리 구조를 단순하고 일관된 방식으로 다룰 수 있게 해주는 강력한 패턴입니다. 특히 계층적 구조를 가진 시스템에서 코드의 복잡성을 크게 줄이고 유지보수성을 향상시킬 수 있습니다.

패턴을 적용할 때는 단일 객체와 복합 객체 간의 일관된 인터페이스 설계가 핵심이며, 이를 통해 클라이언트 코드를 단순화하고 확장성을 확보할 수 있습니다.