수학과의 좌충우돌 프로그래밍

[ES6] proxy 본문

웹프로그래밍/ES6

[ES6] proxy

ssung.k 2020. 1. 5. 04:28

Proxy

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

proxytargethandler 두 개의 인자를 받습니다.

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

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

const userFilter = {};

const filteredUser = new Proxy(user, userFilter);

 

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

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

 

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

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

 

예 들어 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

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

developer.mozilla.org

 

'웹프로그래밍 > ES6' 카테고리의 다른 글

[ES6] Symbol  (0) 2020.01.05
[ES6] generator  (0) 2020.01.05
[ES6] proxy  (0) 2020.01.05
[ES6] Class의 상속, super, this  (0) 2020.01.04
[ES6] Async and Await  (0) 2020.01.03
[ES6] Promises - then, catch, all, race, finally  (0) 2020.01.03
0 Comments
댓글쓰기 폼