옵저버 패턴과 자바스크립트에서의 활용

08 Nov 2023

javascript

옵저버 패턴은 객체 간의 의존성을 줄이고, 객체 간의 상호 작용을 느슨하게 연결하기 위한 디자인 패턴입니다. 이 패턴은 주제(subject) 객체와 여러 개의 옵저버(observer) 객체로 구성됩니다. 주제 객체의 상태가 변경되면, 이를 관찰하는 옵저버 객체들에게 자동으로 알리게 됩니다.

자바스크립트에서의 옵저버 패턴 활용

자바스크립트에서는 옵저버 패턴을 활용하여 이벤트 처리, 비동기 작업 처리 등 다양한 상황에서 유용하게 사용할 수 있습니다. 예를 들어, 사용자의 클릭 이벤트나 데이터의 변경 이벤트를 관찰하고 이에 대응하는 동작을 수행하는 경우에 옵저버 패턴을 적용할 수 있습니다.

// 주제 객체 생성
class Subject {
  constructor() {
    this.observers = [];
  }
  
  addObserver(observer) {
    this.observers.push(observer);
  }
  
  removeObserver(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }
  
  notifyObservers(data) {
    this.observers.forEach(observer => observer.update(data));
  }
  
  // 주제 객체의 상태 변경 시 호출되는 메서드
  changeState(data) {
    this.notifyObservers(data);
  }
}

// 옵저버 객체 생성
class Observer {
  constructor(name) {
    this.name = name;
  }
  
  update(data) {
    console.log(`${this.name} 옵저버: ${data} 상태 변경 감지`);
  }
}

// 주제 객체와 옵저버 객체 생성
const subject = new Subject();
const observer1 = new Observer("옵저버 1");
const observer2 = new Observer("옵저버 2");

// 옵저버 객체를 주제 객체에 등록
subject.addObserver(observer1);
subject.addObserver(observer2);

// 주제 객체의 상태 변경 시, 등록된 옵저버들에게 알림
subject.changeState("데이터 변경됨");

위의 예시에서는 Subject라는 주제 객체와 Observer라는 옵저버 객체를 생성하였습니다. Subject 객체는 addObserver 메서드로 옵저버 객체를 등록하고, changeState 메서드로 상태를 변경하면 등록된 옵저버들에게 상태 변경을 알리게 됩니다. Observer 객체는 update 메서드로 상태 변경을 감지하고 동작을 수행하는 역할을 합니다.

이처럼 자바스크립트에서 옵저버 패턴을 활용하여 객체 간의 상호 작용을 유연하게 구현할 수 있습니다.

자바스크립트에서의 옵저버 패턴 활용

참고 자료