옵저버 패턴과 예제 코드

👽 Observer Pattern

---

옵저버 패턴(Observer Pattern)은 어떤 이벤트가 일어나는 것을 감시하는 패턴을 의미한다. 함수로 직접 요청한 적 없지만 시스템에 의해 발생하는 동작들을 이벤트라 하는데, 이러한 이벤트들을 감시하여 이벤트가 발생할 때마다 미리 정의해 둔 어떠한 동작을 즉각 수행하게 해 주는 프로그래밍 패턴을 옵저버 패턴이라 한다. 예시로 A 버튼이 클릭될 때마다 화면에 '안녕'을 출력하는 동작을 들 수 있다.

옵저버 패턴을 활용하면 다른 객체의 상태 변화를 별도의 함수 호출 없이 즉각적으로 알 수 있기 때문에, 이벤트에 대한 처리를 자주 해야 하는 프로그램이라면 매우 효율적인 프로그램을 작성할 수 있다.

 

Model의 상태가 변경되면 이를 구독하고 있는 View의 렌더링 함수(or 등록해 놓은 함수)가 실행된다. 상태가 변경됨에 따라 View는 자동으로 렌더링이 되는 구조이다.

 

👽 Observer Pattern 코드

---

export default class Observer {
  constructor() {
    this._observers = new Set();
  }
  subscribe(observer) {
    this._observers.add(observer);
  }
  notify() {
    this._observers.forEach((observer) => observer());
  }
}

 

• _observers: 각 View에서 등록한 render 메서드가 저장될 곳이다.
• subscribe: View에서 render 메서드를 등록하는 함수이다.
• notify: Model의 상태가 변경이 될 때, View가 등록한 render 함수들을 호출하는 함수이다.

 

Model (위의 함수를 상속받음)

export default class TextModel extends Observer {
  constructor() {
    super();
    this.text = "hello world";
  }
  getText() {
    return this.text;
  }
  setText(text) {
    this.text = text;
    this.notify();
  }
}

 

• getText: 현재 상태를 반환한다.
• setText: 현재 상태를 받은 인자로 변경시키고 등록된 render 함수들을 호출한다.

 

View (위의 Model 구독)

export default class TextView {
  constructor({ model }) {
    this.$target = document.createElement("div");
    this.textModel = model;
    this.textModel.subscribe(this.render.bind(this)); //Model에 구독
    this.render();
  }
  render() {
    const text = this.textModel.getText(); //Model의 상태를 가져와서 렌더링
    this.$target.innerHTML = `
      <div>${text}</div>
    `;
}

 

View 변경 버튼

export default class ChangeTextBtn {
  constructor({ model }) {
    this.$target = document.createElement("div");
    this.textModel = model;
    this.render();
    this.$target.addEventListener("click", this.handleClick.bind(this));
  }
  render() {
    this.$target.innerHTML = `
      <input tpye='text' />
      <button>text 변경!</button>
    `;
  }
  handleClick({ target }) {
    if (target.tagName !== "BUTTON") return;
    const input = this.$target.querySelector("input");
    this.textModel.setText(input.value);
    input.value = "";
  }
}

 

 

👽 Reference

---

https://velog.io/@haero_kim/%EC%98%B5%EC%A0%80%EB%B2%84-%ED%8C%A8%ED%84%B4-%EA%B0%9C%EB%85%90-%EB%96%A0%EB%A8%B9%EC%97%AC%EB%93%9C%EB%A6%BD%EB%8B%88%EB%8B%A4

옵저버 패턴 개념 떠먹여드립니다 🥄

https://velog.io/@proshy/%EC%98%B5%EC%A0%80%EB%B2%84-%ED%8C%A8%ED%84%B4%EC%9C%BC%EB%A1%9C-%EB%B0%94%EB%8B%90%EB%9D%BCJS-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC%ED%95%98%EA%B8%B0

옵저버 패턴으로 바닐라JS 상태관리하기

https://codesandbox.io/s/keulraeseuhyeong-objeobeopaeteon-ikkod?from-embed 

클래스형 옵저버패턴 - CodeSandbox