[ES6]_Proxy 란 ?

개요

자바스크립트 코딩을 하다보면 객체에 접근시 이벤트를 발생하거나 Validate를 해야하는 경우가 있습니다.

 

이를 Proxy 객체로 감싸고 ( Wrapper )

Trap( 핸들러 메소드 ) 를 사용하여 제어하거나 로직을 심을수 있습니다.

 

Proxy 객체에 대해서 알아보았습니다.

 

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

Proxy - JavaScript | MDN

 

틀린것이 있을 수 있으니 양해부탁드립니다. 

틀린점은 댓글로 알려주시면 정말 감사드리겠습니다.

---

학습

기본적으로 객체는 다음과 같이 선언합니다.

또한 다음과 같이 접근할 수 있습니다.

let target = {
	test1 : "test1",
	test2 : "test2"
}

console.log(target.test1); // 'test1'
console.log(target.test2); // 'test2'

 

Proxy 객체는 두개의 매개변수를 사용하여 선언합니다.

• target : 프록시 할 원본 객체
• handler : 가로채는 작업( Trap ) 혹은 이를 재정의하는 객체

let target = {
	test1 : "test1",
	test2 : "test2"
}

let handler1 = {};

//handler에 아무 설정이 없으면 기존에 객체를 참조하듯이 사용하면 된다.
let proxy1 = new Proxy(target, handler1);


//이를 호출시 기존에 객체참조와 동일하게 사용하면 된다.

console.log(proxy1.test1); // 'tset1'
console.log(proxy1.test2); // 'test2'

 

handler 의 종류는 다음과 같습니다.

 

작용점	메서드	설명
Property	handler.get()	속성 값을 참조(가져옴) 에 대한  트랩
	handler.set()	속성 값을 설정(입력) 에 대한 트랩
	handler.has()	in 연산자에 대한 트랩
	handler.deleteProperty()	delete 연산자에 대한 트랩
	handler.defineProperty()	새로운 프로퍼티 정의에 대한 트랩
Method	handler.apply()	함수 호출에 대한 트랩
	handler.constructor()	new 연산자에 대한 트랩
Object	handler.getPrototypeOf	Object.getPrototypeOf 에 대한 트랩
	handler.setPrototypeOf	Object .setPrototypeOf 에 대한 트랩
	handler.getOwnPropertyDescriptor()	Object.getOwnPropertyDescriptor 에 대한 트랩
	handler.preventExtensions()	Object.preventExtensions 에 대한 트랩
	handler.isExtensible()	Object.isExtensible 에 대한 트랩
	handler.ownKeys()	Reflect.ownKeys 에 대한 트랩

 

---

예제

 

1. 핸들러 내부에 함수 정의

우선 객체의 속성 엑세스를 가로채는 get() 을 사용하였습니다.

let target = {
	test1 : "test1",
	test2 : "test2"
}


let handler = {
	get(target, prop, receiver) {
        return "test";
    
    },
}

let proxy = new Proxy(target, handler);


console.log(proxy.test1); // 'test'
console.log(proxy.test2); // 'test'

 

 

Proxy 객체란 무엇인지 알아봤습니다.

 

다음포스팅에서는 메소드 별 사용법과 예제를 다루도록 하겠습니다.

 

감사합니다.