디자인패턴: 5. 옵저버 패턴 (Observer Pattern)

주체가 어떤 객체의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 메서드 등을 통해 옵저버 목록에 있는 옵저버들에게 변화를 알려주는 디자인 패턴이다.

 

<자바스크립트에서의 옵저버 패턴>

export class Store {
  constructor(state) {
    this.state = {};
    this.observers = {};

    for (const key in state) {
      Object.defineProperty(this.state, key, {
        get: () => state[key],
        set: (val) => {
          state[key] = val;  
          if (Array.isArray(this.observers[key])) {         
            this.observers[key].forEach(observer => observer(val));
          }
        }
      }) 
    }
  }
  subscribe(key, cb) {  
    Array.isArray(this.observers[key]) 
      ? this.observers[key].push(cb)
      : this.observers[key] = [cb];   
  }
}

 

 

자바스크립트에서의 옵저버 패턴은 프록시 객체를 통해 구현할 수도 있다.

 

프록시 객체

프록시(proxy) 객체는 어떠한 대상의 기본적인 동작(속성 접근, 할당, 순회, 열거, 함수 호출 등)의 작업을 가로챌 수 있는 객체를 뜻하며, 자바스크립트에서 프록시 객체는 두개의 매개변수를 가진다.

• target: 프록시할 대상
• handler: target 동작을 가로채고 어떠한 동작을 할 것인지가 설정되어 있는 함수

const handler = {
  get: function(target, name) {
    return name === 'name' ? `${target.a} ${target.b}` : target[name]
  }
}

const p = new Proxy({a: 'KUNDOL', b: 'IS AUMUMU ZANGIN'}, handler);
console.log(p.name) //KUNDOL IS AUMUMU ZANGIN

 

new Proxy() 로 a와 b 속성을 가지고 있는 객체와 handler 함수를 매개변수로 넣고 p 라는 변수를 선언했다. 이후 name 속성을 참조하니 a 와 b라는 속성밖에 없는 객체가 handler의 'name이라는 속성에 접근할때 a와 b를 합쳐서 문자열을 만들라'는 로직에 따라 문자열을 만든다. 이렇게 name 속성 등 특정 속성에 접근할 때 그 부분을 가로채서 어떠한 로직을 강제할 수 있는 것이 프록시 객체이다.

 

프록시 객체를 이용한 옵저버 패턴

function createReactiveObject(target, callback) {
  const proxy = new Proxy(target, {
    set(obj, prop, value) {
      if (value !== obj[prop]) {
        const prev = obj[prop];
        obj[prop] = value;
        callback(`${prop}가 [${prev}] >> [${value}] 로 변경되었습니다`);
      }
      return true;
    },
  });
  return proxy;
}
const a = {
  형규: "솔로",
};
const b = createReactiveObject(a, console.log); //형규가 [솔로] >> [커플] 로 변경되었습니다
b.형규 = "솔로";
b.형규 = "커플";

 

프록시 객체의 set() 함수를 통해 속성에 대한 접근을 가로채서 형규라는 속성이 솔로에서 커플로 되는 것을 감시할 수 있다.