Proxy 객체란 무엇인가?
- 자바스크립트에서의 Proxy 객체의 역할은 대상 객체을 감싸서 (wrapping), 속성 조회, 할당, 열거 및 함수 호출 등 여러 기본 동작을 가로채 (trap) 특별한 다른 동작을 가미시키는 대리자 역할을 한다.
- 가로채진 작업은 Proxy 자체에서 처리되기도 하고, 원래 객체가 처리하도록 그대로 전달되기도 한다.
문법
let proxy = new Proxy(target, handler);
Proxy 객체를 사용해보자.
Proxy 객체를 생성하기 위해서는 두 개의 매개변수가 필요하다.
target은 프록시할 원본 객체이고 handler는 가로채는 작업과 가로채는 작업을 재정의하는 방법을 정의하는 객체이다.
const target = { message1: "hello", message2: "everyone" };
const handler1 = {};
const proxy1 = new Proxy(target, handler1);
console.log(proxy1.message1); // hello
console.log(proxy1.message2); // everyone핸들러가 비어있기 때문에 target의 내용이 그대로 전달된다.
get
get을 사용해서 트랩 (traps)을 만들어보겠다.
여기서 get은 모든 속성 접근자(target)을 재정의 한다.
const target = { message1: "hello", message2: "everyone" };
const handler2 = {
get(target, prop, receiver) {
return "world";
}
};
const proxy2 = new Proxy(target, handler2);
console.log(proxy2.message1); // world
console.log(proxy2.message2); // world모든 타겟이 "world"로 재정의된 것을 볼 수 있다.
이번엔 set을 사용하는 방법에 대해 알아보자
set
Proxy 객체의 set() 메소드는 객체의 속성에 값을 할당할 때 호출된다. 이 메소드는 target, prop, value, receiver 네 가지 인자를 받는다. 여기서 target은 프록시할 원본 객체, prop은 작성한 속성 이름, value는 작성한 속성 값, 그리고 receiver는 getter가 호출될 때의 this 값이다.
const target = {};
const handler = {
set(target, prop, value) {
console.log(`Property ${prop} is being set to ${value}`);
target[prop] = value;
}
};
const proxy = new Proxy(target, handler);
proxy.foo = 'bar'; // Property foo is being set to bar코드에서는 set() 메소드를 사용하여 객체의 속성에 값을 할당할 때마다 콘솔에 로그를 출력하게 된다.
has
Proxy 객체의 has() 메소드는 in 연산자가 작동할 때 호출된다. 이 메소드는 target과 prop 두 가지 인자를 받는다. 여기서 target은 프록시할 원본 객체이고 prop은 조회한 속성 이름이다.
const target = { foo: 'bar' };
const handler = {
has(target, prop) {
console.log(`Checking if property ${prop} exists`);
return prop in target;
}
};
const proxy = new Proxy(target, handler);
console.log('foo' in proxy); // Checking if property foo exists
// true코드에서는 has() 메소드를 사용하여 객체의 속성을 조회할 때마다 콘솔에 로그를 출력하게 된다.
proxy객체를 이용하여 객체의 속성에 값을 할당할 때마다 유효성 검사를 해보자.
const target = {};
const handler = {
set(target, prop, value) {
if (prop === 'age') {
if (!Number.isInteger(value)) {
throw new TypeError('The age is not an integer');
}
if (value > 200) {
throw new RangeError('The age seems invalid');
}
}
target[prop] = value;
}
};
const proxy = new Proxy(target, handler);
proxy.age = 100;
console.log(proxy.age); // 100
proxy.age = 'young'; // Throws an exception: Uncaught TypeError: The age is not an integer
proxy.age = 300; // Throws an exception: Uncaught RangeError: The age seems invalid코드에서는 set() 메소드를 사용하여 객체의 속성에 값을 할당할 때마다 유효성 검사를 수행하게 된다. 새로 들어온 객체의 속성이 age일 때 유효성 검사를 하게되어 만약에 숫자가 200이상이거나 숫자가 아닐 때 각각의 유효성 검사를 할 수 있게 된다.
