Observer

옵저버 패턴이란 특정 객체의 상태를 여러 observer 들이 구독하여 객체의 변화가 있을 때마다 옵저버 들에게 알려주는 패턴을 말한다. 조금 더 자세히 말하자면, 객체에 변화가 발생하게 되면 해당 객체를 구독하고 있는 옵저버들에게 상태가 바뀌었다는 알림을 보내 상태를 갱신하도록 하게 하는 것이다.

우리가 인스타그램 같은 sns를 사용하면서 내가 팔로우한 사람의 게시물이 업데이트 될 때마다 알림으로 알려주는 것을 생각하면 편할 듯 하다. 보통 일대일, 일대다의 관계를 가진다.

옵저버 패턴을 사용하지 않을 경우, 특정 객체에 변화가 일어났는지 확인하기 위해 주기적으로 확인을 해주어야 하는데, 이것을 바로 Polling 이라고 한다. 이 경우, 풀링을 하는 리소스의 추가 및 풀링 사이에 이벤트가 발생하게 될 경우, 해당 이벤트를 캐치 하지 못하는 상황이 발생할 수도 있다.

이제 옵저버 패턴의 작동 로직상에서 필요한 두개의 객체를 살펴보자.

Subject (Object)

상태 변화의 주체 객체이다. 이 객체에는 객체를 구독하고 있는 옵저버들의 리스트와 여러 메서드들이 포함되어 있다.

• subscribe : 객체에 옵저버를 등록하는 메서드

• notify : update가 실행되었을때, 옵저버들에게 알려주는 메서드

패턴을 구현하기 위해 필수적인 두 가지의 메서드 이다. Subject는 상태의 변화가 일어나게 되면 옵저버 리스트에 있는 옵저버들에게 notify 메서드를 통하여 이 객체 상태가 변했다는 것을 알려준다.

간단한 구현 예시를 보도록 하자.

interface ISubject {
  subscribe(observer: Observer): void;
  remove(observer: Observer): void;
  notify(): void;
}

class Subject implements ISubject {
  // 옵저버 리스트
  private observers: Observer[] = [];
  private state: any;

  // 옵저버를 등록하는 subscribe 메서드
  subscribe(observer: Observer): void {
    this.observers.push(observer);
  }
  // 등록된 옵저버를 제거하는 remove 메서드
  remove(observer: Observer): void {
    const index = this.observers.indexOf(observer);
    if (index > -1) {
      this.observers.splice(index, 1);
    }
  }
  // 옵저버들에게 상태변화를 알려주는 notify 메서드
  notify(): void {
    for (const observer of this.observers) {
      observer.update(this.state);
    }
  }
  setState(state: any): void {
    this.state = state;
    this.notifyObservers();
  }

  getState(): any {
    return this.state;
  }
}

Observer

Subject의 상태를 구독하고 있는 옵저버 객체이다. Subject와 유사하게 내부에 메서드를 포함하고 있는데, Subject 의 상태 변화가 일어나게 되어 알림을 받았을때 실행될 update 메서드가 바로 그것이다. 일대다의 관계를 가진 옵저버 패턴의 특성상, 여러 옵저버가 필요하게 되면 클래스를 만들어 상속하여 사용하게끔 만든다.

간단한 구현과 어떤 식으로 사용 하는지에 대한 예시를 살펴보자.

interface IObserver {
  update(data: any): void;
}

class Observer implements IObserver {
  private id: number;

  constructor(id: number) {
    this.id = id;
  }

  update(data: any): void {
    console.log(`Observer ${this.id} received data: ${data}`);
  }
}

const subject = new Subject();

const observer1 = new Observer(1);
const observer2 = new Observer(2);

subject.subscribe(observer1);
subject.subscribe(observer2);

subject.setState("Hello Observers!");

subject.remove(observer1);

subject.setState("Only observer2 should receive this");