프론트엔드 디자인 패턴 - #3 옵저버 패턴(Observer Pattern)

옵저버 패턴

객체지향 프로그래밍 디자인 패턴 중 하나로, 객체의 상태 변화가 있을 때 그 변화를 관찰하는 옵저버 객체들에게 자동으로 통보하는 방식. 주로 상태 관리나 이벤트 시스템에서 많이 사용된다.

주요 개념

1. 주제(Subject)
   • 상태를 가지고 있으며, 상태 변화가 있을 때 옵저버에게 통보한다.
   • 'subsribe' 메소드를 통해 옵저버를 등록하고, 'unsubscribe' 메소드를 통해 옵저버를 제거할 수 있다.
   • 상태 변화가 있을 때 'notify' 메소드를 호출하여 모든 옵저버에게 알린다.
2. 옵저버(Observer)
   • 주제의 상태 변화를 관찰하고, 상태 변화가 있을 때 주제로부터 통보를 받는다.
   • 주제에서 통보를 받으면 특정 행동을 수행한다.

예제 코드

class Subject{
  constructor(){
   	this.observers=[];
  }
  subscribe(observer){
  	this.observers.push(observer);
  }
  unsubsribe(observer){
  	this.observers=this.observers.filter(obs=>obs!==observer);
  }
  notify(data){
  	this.observers.forEach(observer=>observer.update(data));
  }
}

class Observer{
  constructor(name){
   	this.name=name;
    }
  update(data){
  	console.log(`${this.name} received data: ${data}`);
  }
}

const subject=new Subject();

const observer1=new Observer('Observer1');
const observer2=new Observer('Observer2');

subject.subcribe(observer1);
subject.subsribe(observer2);

subject.notify('Hello, Observers!);
// Observer 1 received data: Hello, Observers!
// Observer 2 received data: Hello, Observers!

실생활로 예를 들면 다음과 같다.

인기있는 맛집에서는 오픈 전에도 웨이팅 목록을 작성할 수 있다. 여기서 고객들(Observer)은 해당 맛집(Subject)의 웨이팅 목록에 고객 정보를 작성(subsribe)할 수 있다.

손님을 받을 수 있는 준비가 되면 가게에서 고객들에게 고객 정보를 바탕으로 동시에 문자 알림(notify)를 보낼 수 있다.

그러면 각 고객들(Observer)들은 맛집의 상태 변화를 감지하고 가게에 가는 행동(update)를 하게 된다.

프론트엔드에서의 사용 예시

1. 이벤트 시스템

   • DOM 이벤트 리스너는 옵저머 패턴의 한 예이다. 특정 DOM 요소(subject)에 이벤트 리스너(observer)를 등록하면, 해당 요소에 이벤트가 발생했을 때 리스너가 통보를 받고 동작한다.

2. 상태 관리 라이브러리

   • react의 상태 관리 라이브러리인 Redux나 MobX에서도 옵저버 패턴이 사용된다. 상태(subject)가 변경되면 컴포넌트(observer)가 그 변경을 감지하고 UI를 업데이트 한다.

보통 상태 관리 라이브러리와 DOM 이벤트 리스너를 사용해서 개발하기 때문에 직접 옵저버 패턴을 구현하는 일을 드물 것 같지만, 간접적으로 사용할 경우가 많기 때문에 개념을 이해하고 있으면 좋을 것 같다.