[javascript] 옵저버 패턴이란 무엇인가?

21 Nov 2023

javascript

옵저버 패턴은 객체간의 일대다 의존성을 정의하는 디자인 패턴으로, 어떤 객체의 상태나 데이터가 변경되었을 때, 이에 의존하는 다른 객체들에게 자동으로 알림을 전달하는 방식을 제공합니다. 이를 통해 객체간의 결합도를 낮추고 유연한 구조를 구현할 수 있습니다.

옵저버 패턴의 구성 요소

옵저버 패턴은 주로 다음과 같은 구성 요소로 이루어집니다:

Subject(주체)
- 상태나 데이터를 가지고 있는 주체 객체입니다.
- 옵저버들의 등록과 알림을 관리합니다.
Observer(옵저버)
- 주체 객체의 상태나 데이터의 변경 상황을 관찰하고자 하는 객체입니다.
- 주체 객체의 상태 변화에 따라 알림을 받는 역할을 수행합니다.
Concrete Observer(구체적인 옵저버)
- 옵저버 인터페이스를 구현하여 실제로 알림을 받는 구체적인 옵저버 객체입니다.

옵저버 패턴의 동작 방식

주체 객체는 옵저버들을 등록하고, 상태나 데이터가 변경되었을 때 알림을 보내야 합니다.
옵저버들은 주체 객체에 등록되어, 주체 객체의 상태 변화에 대한 알림을 받습니다.
주체 객체의 상태가 변경되면, 등록된 옵저버들에게 알림을 보냅니다.
옵저버들은 알림을 받아 자신의 역할에 따라 처리를 수행합니다.

예시 코드

// Subject(주체) 객체
class Subject {
  constructor() {
    this.observers = [];
    this.state = null;
  }
  
  setState(state) {
    this.state = state;
    this.notifyObservers();
  }
  
  notifyObservers() {
    for (const observer of this.observers) {
      observer.update(this.state);
    }
  }
  
  registerObserver(observer) {
    this.observers.push(observer);
  }
  
  unregisterObserver(observer) {
    const index = this.observers.indexOf(observer);
    if (index !== -1) {
      this.observers.splice(index, 1);
    }
  }
}

// Observer(옵저버) 인터페이스
class Observer {
  update(state) {
    // 상태 변화에 따른 처리 로직 구현
  }
}

// Concrete Observer(구체적인 옵저버) 객체
class ConcreteObserver extends Observer {
  update(state) {
    // 주체의 상태 변화에 따른 처리 로직 구현
  }
}

// 사용 예시
const subject = new Subject();
const observer1 = new ConcreteObserver();
const observer2 = new ConcreteObserver();

subject.registerObserver(observer1);
subject.registerObserver(observer2);

subject.setState("상태가 변경되었습니다.");

위의 예시 코드에서는 주체 객체인 Subject가 상태가 변경될 때 등록된 옵저버들에게 알림을 보내고, 옵저버들은 각자의 업무에 맞게 상태 변경에 대한 처리를 수행합니다.

요약

옵저버 패턴은 객체간의 상호 의존성을 낮추고 유연한 구조를 구현하기 위한 디자인 패턴입니다. 주체 객체와 옵저버 객체로 이루어져 있으며, 주체의 상태가 변경되면 옵저버들에게 알림을 전달합니다. 이를 통해 객체 간의 결합도를 최소화하고, 변경에 유연하게 대응할 수 있습니다.

옵저버 패턴의 구성 요소

옵저버 패턴의 동작 방식

예시 코드

요약

참고 자료