자바스크립트 Mediator Pattern

Mediator Pattern(미디에이터 패턴) 은 객체 간의 복잡한 의존 관계를 하나의 중재자 객체(Mediator)로 통합하여, 객체들이 직접 통신하지 않고 중재자를 통해서만 상호작용하도록 만드는 행동 디자인 패턴입니다.

---

🧱 Mediator Pattern이란?

Mediator Pattern은 객체 간의 상호작용을 캡슐화하여, 서로 직접 연결되지 않고 중앙 집중식 통신 방식으로 구조를 단순화합니다. 특히 많은 객체가 서로 메시지를 주고받는 UI 구성에서 유용하게 사용됩니다.

class ChatMediator {
    constructor() {
        this.users = [];
    }
    register(user) {
        this.users.push(user);
        user.setMediator(this);
    }
    sendMessage(from, message) {
        this.users.forEach(user => {
            if (user !== from) {
                user.receive(message);
            }
        });
    }
}

class ChatUser {
    constructor(name) {
        this.name = name;
        this.mediator = null;
    }
    setMediator(mediator) {
        this.mediator = mediator;
    }
    send(message) {
        this.mediator.sendMessage(this, message);
    }
    receive(message) {
        console.log(`${this.name} 수신: ${message}`);
    }
}

const mediator = new ChatMediator();
const alice = new ChatUser("Alice");
const bob = new ChatUser("Bob");

mediator.register(alice);
mediator.register(bob);

alice.send("안녕하세요!");

---

✅ 장점

1. 의존성 감소: 객체 간 직접적인 참조 제거
2. 유지보수 용이: 통신 로직이 하나의 객체에 집중되어 관리가 쉬움
3. 확장성 증가: 객체 추가 시 수정 범위 최소화 가능

---

❌ 단점

1. 중재자 객체 복잡도 증가: 모든 로직이 집중되면 오히려 복잡해짐
2. 성능 문제: 메시지 전달이 중간 단계를 거치므로 성능 저하 우려
3. 잘못된 설계 시 집중 과부하: 객체가 많아질수록 중재자 관리가 어려워짐

---

🛠️ 실전 예시: UI 컴포넌트 간 통신

class FormMediator {
    constructor() {
        this.components = {};
    }
    register(name, component) {
        this.components[name] = component;
        component.setMediator(this);
    }
    notify(sender, event) {
        if (event === 'inputChanged') {
            this.components['submitButton'].toggle(sender.isValid());
        }
    }
}

class InputField {
    constructor() {
        this.mediator = null;
        this.value = '';
    }
    setMediator(mediator) {
        this.mediator = mediator;
    }
    type(text) {
        this.value = text;
        this.mediator.notify(this, 'inputChanged');
    }
    isValid() {
        return this.value.length > 3;
    }
}

class SubmitButton {
    constructor() {
        this.enabled = false;
    }
    setMediator(mediator) {
        this.mediator = mediator;
    }
    toggle(state) {
        this.enabled = state;
        console.log(`버튼 상태: ${state ? '활성화됨' : '비활성화됨'}`);
    }
}

const mediator = new FormMediator();
const input = new InputField();
const button = new SubmitButton();

mediator.register('inputField', input);
mediator.register('submitButton', button);

input.type('Hi');
input.type('Hello');

---

🧩 결론

Mediator Pattern은 복잡한 객체 관계를 효율적으로 정리할 수 있는 중재자 기반 통신 방식으로, 특히 UI 구성 요소, 채팅 시스템, 이벤트 처리 시스템 등에서 유용하게 활용됩니다. 객체 간 의존성을 줄이면서도 명확한 의사소통 구조를 설계할 수 있어 유지보수성과 확장성 측면에서 강력한 이점을 제공합니다.