Proxy란?

Proxy 객체를 사용하면 원래 Object 대신 사용할 수 있는 객체를 만들고, 이 객체의 속성 가져오기, 설정 및 정의 등 기본 객체 작업을 재정의 할 수 있습니다. 즉, 객체 자체가 처리하는 특정 명령을 재정의할 수 있게된다.

개인적인 생각

proxy객체를 생성하게되면 원본객체를 얕은복사하는 것 같다. 맡긴하지만 주의할 점은 프록시는 여전히 다른 ID를 가진 또 다른 객체로, 래핑된 객체와 외부 사이에서 작동하는 프록시일 뿐입니다.

문법

• target - 프록시 할 원본 객체(함수를 포함한 모든 객체 가능)
• handler - 가로채는 작업(가로챌? 작업)과 가로채는 작업을 재정의하는 방법을 정의하는 객체입니다.

let proxy = new Proxy(target, handler);

사용 예제

const target = {
	message1: 'Hi',
	message2: 'hello',
};
const handler = {
	get(target, prop, receiver){
		if(prop === 'message1'){
			return 'welcome!';
		}
		return Reflect.get(...arguments)
	}
}

const proxy = new Proxy(target, handler);
console.log(proxy.message1, proxy.message2); // 'welcome', 'hello'

Reflect 클래스의 도움으로 일부 접근자에게 원래동작을 수행하고 다른 접근자를 재정의할 수 있습니다.

폐기 가능한 프록시 객체

프록시 객체는 생성하면 target 객체를 변경할 수 없습니다. 그리고 생성자로 만들어진 프록시 객체는 지워지거나 재사용이 불가능합니다. 따라서, 필요에 따라 폐기 가능한 프록시를 만들 수도 있습니다.

문법

const revocable = Proxy.revocable(target, handler);

위와 같이 생성하고 프록시 생성과 동일하며 추가적으로 폐기할 수 있는 revoke() 메서드를 추가로 반환해줍니다.

const revocable = Proxy.revocable(target, handler); 명령어로 생성하게 되면 revocable 객체는 proxy, revoke 라는 객체를 지니고 있습니다. (Symbol.iterator에서 iteratorResult가 value, done 을 갖고있는 것 처럼)

• proxy: 생성된 프록시 객체입니다.
• revoke: 프록시를 폐기할 수 있는 메서드입니다.

const target = {
	name: 'bigOne',
	age: '28',
	introduce: 'Frontend Developer',
};
const handler = {
	get(target, prop, receiver){
		if(prop === 'age') return "개인정보 보호로 조회가 불가능합니다.";
		if(prop === 'introduce') return 'FE';
		Reflect.get(...arguments);
	}
}

const revocable = Proxy.revocable(target, handler);

//spread 문법을 사용하여 받는다.
const { proxy, revocable } = revocable; 
// 또는 const { proxy, revocable } = Proxy.revocable(target, handler);

console.log(proxy.name, proxy.age, proxy.introduce);
// bigOne, 개인정보 보호로 조회가 불가능합니다., FE
revoke();
console.log(proxy);  // <Revoked Proxy>