[JavaScript] Proxy 설명

출처 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy

 

 

Proxy

프록시 객체를 사용하면, 오리지널 객체에 대한 기본 작업을 가로채서 재정의할 수 있습니다.

 

설명

프록시 객체를 통해, 오리지널 객체 정보에 대해 getting, setting, 설정정의 등을 할 수 있는 객체를 만들 수 있습니다. 프록시 객체는 흔히 로그 속성 접근, 유효성검사, 포매팅등에 사용됩니다.

 

프록시에는 두가지 파라미터를 줄 수 있습니다.

• target: 프록시로 만들 오리지널 객체입니다
• hadler: 가로챌 작업과 가로채어진 작업을 재정의하는 방법을 정의하는 객체입니다.

예를들어, 아래 코드는 두 개의 파라미터를 가진 심플한 타겟객체와, 빈 핸들러를 정의합니다. 

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

const handler1 = {};

const proxy1 = new Proxy(target. handler1);

핸들러가 비었기 때문에, 이 프록시에 getter를 했을 때, 오리지널 객체와 동일하게 동작합니다.

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

 

프록시를 커스터마이징 하기 위해, 우리는 핸들러 객체에 get() 함수를 구현합니다.

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

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

const proxy2 = new Proxy(target, handler2);

이제 우리는 프록시를 만들 때, get()의 구현체인 핸들러를 제공합니다. 이제 이 프록시에서 속성에 접근하면, 핸들러가 그 시도를 가로채서 get()함수를 실행합니다. 핸들러 함수는 가끔 함정(traps)이라고 불립니다. 그 이유는 아마도, 타겟 오브젝트에 대한 접근을 함정에 걸린것 처럼 가로채기 때문일 겁니다.

 

이 hanlder2가 구현한 매우 간단한 함정은 모든 속성에 대한 접근을 재정의 합니다.

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

reflect 클래스 의 도움으로, 우리는 프록시에서 오리지널 속성에 대한 접근과 재정의를 할 수 있습니다.

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

const handler3 = {
  get(target, prop, receiver) {
    if (prop === "message2") {
      return "world";
    }
    return Reflect.get(...arguments);
  }
};

const proxy3 = new Proxy(target, handler3);

console.log(proxy3.message1); // hello
console.log(proxy3.message2); // world