객체 감시를 위한 자바스크립트 Observers

08 Nov 2023

javascript

자바스크립트는 동적인 언어로서, 객체의 속성이 변경될 때마다 이를 감시하고자 하는 경우가 많습니다. 예를 들어, 사용자의 입력값을 실시간으로 업데이트하거나, 데이터의 변경에 따른 화면 갱신을 처리하려는 경우 객체 감시는 매우 유용한 패턴입니다.

자바스크립트에서 객체를 감시하려면 Observers를 사용할 수 있습니다. Observers는 객체의 변경 사항을 감시하고, 변경이 감지되면 정해진 동작을 수행합니다. 이를 통해 객체의 상태를 실시간으로 추적하고, 원하는 대로 반응할 수 있습니다.

Observers의 사용법

자바스크립트의 Observers를 사용하기 위해서는 다음과 같은 단계를 따를 수 있습니다.

Object.observe(obj, callback)를 사용하여 객체를 감시 대상으로 등록합니다.
등록한 객체의 속성이 변경될 때마다, 등록한 콜백 함수가 호출됩니다.
콜백 함수는 변경된 속성의 배열을 인수로 받고, 이를 통해 필요한 동작을 수행할 수 있습니다.

아래는 Observers의 사용 예제입니다.

let myObject = {
  name: "John",
  age: 25
};

function callback(changes) {
  changes.forEach(change => {
    console.log(`Property ${change.name} changed from ${change.oldValue} to ${change.object[change.name]}`);
  });
}

Object.observe(myObject, callback);

myObject.name = "Jane";  // Property name changed from John to Jane
myObject.age = 30;    // Property age changed from 25 to 30

위 예제에서는 myObject 객체를 감시 대상으로 등록하고, callback 함수를 등록합니다. 이후 myObject 객체의 name 속성과 age 속성이 변경될 때마다 callback 함수가 호출되며, 변경 사항을 콘솔에 출력합니다.

Observers의 지원 종료

그러나, Observers는 ECMAScript 2016 표준에서 제외되어 더 이상 지원되지 않는 기능입니다. 대신, Proxy 객체를 사용하여 비슷한 동작을 구현할 수 있습니다. Proxy 객체는 다른 객체의 대리자 역할을 수행하며, 객체의 속성에 접근할 때 필요한 동작을 재정의할 수 있습니다.

위에서 예제로 보여준 코드를 Proxy 객체를 사용하여 다음과 같이 변환할 수 있습니다.

let myObject = {
  name: "John",
  age: 25
};

let handler = {
  set(target, key, value) {
    console.log(`Property ${key} changed from ${target[key]} to ${value}`);
    target[key] = value;
  }
};

let proxy = new Proxy(myObject, handler);

proxy.name = "Jane";  // Property name changed from John to Jane
proxy.age = 30;    // Property age changed from 25 to 30

Proxy 객체를 사용하면 객체의 속성 변경을 감시하고 필요한 동작을 수행할 수 있습니다. 이를 활용하여 Observers와 유사한 기능을 구현할 수 있습니다.

결론

자바스크립트 Observers를 사용하면 객체의 속성 변경을 감시하고 필요한 동작을 수행할 수 있습니다. 이를 통해 실시간으로 객체의 상태를 추적하거나, 변경에 따른 화면 갱신 등을 처리할 수 있습니다. 하지만, Observers는 최신 ECMAScript 표준에서는 더 이상 지원되지 않으므로, Proxy 객체를 사용하여 비슷한 동작을 구현하는 것이 권장됩니다.

#Tech #JavaScript