옵저버 패턴 예제로 쉽게 이해하기

의도와 해결하는 문제

의도: 객체 간에 일대다 의존성을 정의하여, 한 객체의 상태가 바뀌면 그에 의존하는 모든 객체가 통지받고 자동으로 갱신되게 합니다. 옵저버는 GoF(Gang of Four) 책에 실린 행동 패턴 중 하나이며, 발행-구독(publish-subscribe)이나 리스너 패턴이라고도 합니다.

웹 쇼핑몰의 장바구니를 상상해 봅시다. 상품이 추가되면 헤더의 장바구니 아이콘이 새 개수를 보여 주고, 사이드바가 새 합계를 보여 주고, 분석 모듈이 이벤트를 기록해야 합니다. 장바구니가 이들을 직접 호출하면 장바구니 모듈은 헤더, 사이드바, 분석 모듈에 의존하게 됩니다. 네 번째 반응을 추가하려면 장바구니를 또 고쳐야 합니다.

옵저버 패턴에서는 장바구니가 구독자 목록만 유지하고 바뀔 때 각각을 호출합니다. 헤더, 사이드바, 분석 모듈이 스스로 구독합니다. 장바구니는 이들을 import하지 않으며, 새 기능이 장바구니 코드를 건드리지 않고도 장바구니 변경에 반응할 수 있습니다.

구조와 참여자

통지 방식에는 두 가지가 있습니다. 푸시 모델에서는 서브젝트가 바뀐 데이터를 통지와 함께 보냅니다. 풀 모델에서는 “뭔가 바뀌었다”고만 알리고, 옵저버가 필요한 데이터를 서브젝트에 요청합니다.

TypeScript 구현

작은 제네릭 Subject 클래스가 구독을 처리합니다. 옵저버는 TypeScript에서 가장 흔한 형태인 일반 함수입니다. subscribe는 구독을 해지하는 함수를 반환하므로 호출자가 어떤 리스너를 등록했는지 잊을 수 없습니다.

type Listener<T> = (value: T) => void;

class Subject<T> {
  private listeners = new Set<Listener<T>>();

  subscribe(listener: Listener<T>): () => void {
    this.listeners.add(listener);
    return () => this.listeners.delete(listener);
  }

  protected notify(value: T) {
    for (const listener of [...this.listeners]) listener(value);
  }
}

type CartEvent = { count: number; total: number };

class Cart extends Subject<CartEvent> {
  private items: { name: string; price: number }[] = [];

  add(name: string, price: number) {
    this.items.push({ name, price });
    const total = this.items.reduce((sum, item) => sum + item.price, 0);
    this.notify({ count: this.items.length, total });
  }
}

const cart = new Cart();
cart.subscribe(({ count }) => console.log("header: " + count + " items"));
const stopAnalytics = cart.subscribe(({ total }) => console.log("analytics: total " + total));

cart.add("Book", 12);
stopAnalytics(); // unsubscribe
cart.add("Pen", 3);
// header: 1 items
// analytics: total 12
// header: 2 items

notify는 집합의 복사본([...this.listeners])을 순회합니다. 이렇게 하면 통지 도중 스스로 구독을 해지하는 리스너가 있어도 루프가 흐트러지지 않습니다.

내장 EventTarget 사용하기

브라우저, Node.js, Deno는 EventTarget을 제공하므로 직접 서브젝트 클래스를 만들 필요가 없는 경우가 많습니다.

const thermostat = new EventTarget();

thermostat.addEventListener("change", (e) => {
  console.log("new temperature:", (e as CustomEvent<number>).detail);
});

thermostat.dispatchEvent(new CustomEvent("change", { detail: 21.5 }));
// new temperature: 21.5

Node.js에는 node:events 모듈의 EventEmitter 클래스도 있으며 on, off, emit 메서드를 가집니다.

언제 쓰고 언제 쓰지 말아야 할까

• 한 객체의 변경이 다른 객체들을 갱신해야 하는데 그 수나 종류를 미리 알 수 없을 때 사용합니다.
• 핵심 모듈이 그에 반응하는 UI, 로깅, 분석 코드에 의존하지 않게 하고 싶을 때 사용합니다.
• 사용자 입력, 메시지, 센서 값처럼 시간에 따라 발생하는 이벤트에 사용합니다.
• 고정된 수신자가 정확히 하나라면 사용하지 않습니다. 직접 메서드를 호출하거나 콜백 매개변수를 쓰는 편이 따라가기 쉽습니다.
• 다른 통지를 일으키는 옵저버 체인을 조심하세요. 업데이트 루프가 생길 수 있고 무엇이 왜 바뀌었는지 파악하기 어려워집니다.
• 서브젝트가 문서로 밝히지 않았다면 옵저버가 호출되는 순서에 의존하지 마세요.

실제 사용 사례

• DOM: element.addEventListener("click", handler)는 요소에 옵저버를 구독시킵니다.
• Node.js: EventEmitter는 스트림, HTTP 서버를 비롯한 많은 핵심 객체의 기반입니다.
• MutationObserver, IntersectionObserver, ResizeObserver 같은 브라우저 옵저버 API는 페이지의 변화를 콜백에 알립니다.
• RxJS는 값의 스트림을 옵저버가 구독하는 옵저버블로 모델링합니다.
• Java: java.util.Observable은 Java 9에서 사용 중단되었고, 대신 java.util.concurrent.Flow 인터페이스(발행자와 구독자)와 이벤트 리스너 인터페이스를 사용합니다.

관련 패턴