[ES6] proxy

Proxy

Proxy 객체는 기본적인 동작(속성 접근, 할당, 순회, 열거, 함수 호출 등)의 새로운 행동을 정의할 때 사용합니다.

proxy 는 target 과 handler 두 개의 인자를 받습니다.

target 으로는 새로운 행동을 정의하고 싶은 object 를, handler 에서는 target 의 행동을 정의합니다.

const user = {
  name: "minsung",
  age: 24,
  school: "UOS"
}

const userFilter = {};

const filteredUser = new Proxy(user, userFilter);

 

proxy 객체 filteredUser 는 target 의 필드를 참조가능합니다. 이 뿐만 아니라 target 과 동일하게 사용이 가능합니다.

console.log(filteredUser.name);
// minsung

 

handler 에는 trap 을 정의해봅시다.

trap 은 target 값에 접근할 수 있는 메소드를 말하며 이미 정해져있습니다.

 

예 들어 filteredUser 통해서 target 에 접근할 때는 userFilter 필터의 get trap 을 거치게 됩니다.

이를 다음과 같이 커스튬하게 되면 그에 따라 값이 결정됩니다.

const userFilter = {
  get: () => {
    console.log("get 호출");
    return "get";
  }
};

const filteredUser = new Proxy(user, userFilter);

console.log(filteredUser.name);
// get 호출
// get

 

사용자의 나이는 비공개하도록 get 을 커스튬해봅시다.

• target : proxy 의 첫 번째 인자로 받은 object
• prop : 원하는 필드값
• receiver : proxy 객체

const userFilter = {
  get: (target, prop, receiver) => {
    return prop === "age" ? "나이는 비공개입니다." : target[prop];
  }
};

const filteredUser = new Proxy(user, userFilter);

console.log(filteredUser.name);
console.log(filteredUser.age);
// minsung
// 나이는 비공개입니다.

 

이 외의 여러 trap 에 대해서는 아래의 링크에서 자세히 확인할 수 있습니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy

Proxy