[JS] Proxy 객체

Proxy 객체

Proxy 객체란?

Proxy는 Proxy 서버로 더 익숙하지만, JavaScript에서는 객체로도 사용되는 개념이다. 의미는 실제 Proxy 서버와 비슷하게 한 객체에 대한 기본 작업을 가로채고 재정의하는 프락시를 만드는 객체이다

이는 주로, 속성 액세스를 기록하고 입력의 유효성 검사, 형식 지정 등에 활용할 수 있다.

프락시 객체는 두 개의 매개변수를 사용하여 생성할 수 있다.

• target : 프락시할 원본 객체
• handler : 가로채는 작업과 가로채는 작업을 재정의하는 방법을 정의하는 객체 -> 프록시 객체의 target 동작을 가로채서 정의할 동작들이 정해져 있는 함수

const target = {
  message1: "hello",
  message2: "everyone"
};

const handler1 = {};

const proxy1 = new Proxy(target, handler1);

위 예시에서 target이라는 원본 객체와, 빈 객체를 handler로 사용하여 proxy 객체를 생성하였다.

console.log(proxy1.message1); // hello
console.log(proxy1.message2); // everyone

하지만 handler는 빈 객체이기 때문에 Proxy객체는 원본 객체처럼 사용할 수 있다.

const target = {
  message1: "hello",
  message2: "everyone"
};

const handler2 = {
  get(target, prop, receiver) {
    return "world";
  }
};

const proxy2 = new Proxy(target, handler2);

이번에는 handler에 get 프로퍼티를 추가해 보았다.
handler는 대표적으로 get(), set(), has() 가지고 있는데, get() 함수는 원본객체의 속성과 함수에 대한 접근을 가로채고, set() 함수는 속성에 대한 접근을, 마지막으로 has()는 in 연산자의 사용을 가로챈다.

handler.get() 함수는 아래의 매개변수를 가진다.

• target : 대상 객체
• property : 가져올 속성의 이름 또는 symbol
• receiver : 프락시 또는 프락시에서 상속되는 객채

console.log(proxy2.message1); // world
console.log(proxy2.message2); // world

실제로 proxy2.message1, 2 속성에 접근하려 했지만, get 함수가 가로채서 world라는 값을 리턴한 것을 확인할 수 있다.

Proxy객체 활용

이러한 자바스크립트의 Proxy 객체는 옵서버 패턴을 구현하는데 활용할 수 있다.

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

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.형규 = "커플";

위 코드는 면접을 위한 CS 전공지식노트 책을 참고하여 작성한 옵저버 패턴이다. 원본 객체인 a를 createReactiveObject로 만들어진 proxy객체가 감시하고 있으며, 원본 객체의 값이 변화는 것을 감지했을 때, 옵서버에게 알려주는 코드이다.

set() 함수는 target, property. value, receiver를 매게 변수로 가지는데 value는 위 코드에서 b. 형규 = '커플'에서 형규에 접근하여 설정하려고 했던 '커플'을 의미한다.

이 코드는 클로저의 역할을 하는 proxy객체가 set()을 감지할 때마다, callback 함수를 실행하여 옵서버에게 변경을 알려주고 있다.

Vue.js 3.0 옵저버 패턴

Vue.js에서 ref나 reactive로 정의하면 해당 값이 변경되었을 때 자동으로 DOM에 해당 변경이 이루어진다. 이는 특정 값의 변경을 Proxy객체가 가로채어 추가적인 작업을 수행하는 옵저버 패턴을 활용한 것이고 실제 코드에서도 ProxyMap과 get, set을 활용한 것을 확인할 수 있다.

참고 자료

Mozilar

면접을 위한 CS 전공지식 노트