[Javascript] Proxy 객체

Proxy 객체는 ES2015부터 추가된 객체입니다. 프록시(Proxy)라는 단어의 뜻인 대리, 대신 처럼 무언가를 대신하는 역할을 하는 객체입니다.

---

1. Proxy 객체

Proxy 객체는 객체의 기본적인 동작의 새로운 동작을 정의할 때 사용하는 객체입니다. 새로운 동작이라는 것은 기존의 객체를 조작하는 행위를 할 때 로그를 찍어준다거나, 객체를 열거할 때 추가적인 가공을 한다거나 하는 식으로 사용자가 제작한 어플리케이션에서 객체의 독자적인 새로운 동작을 정의한다는 것 입니다.

프록시 객체를 이용하면 객체 내부를 건드리지 않고 새로운 동작을 구현할 수 있습니다. 프록시 객체는 다음과 같이 사용합니다.

new Proxy(타겟, 핸들러);

타겟은 조작을 추가할 대상 객체, 핸들러는 타깃의 조작을 정의하는 객체입니다.

이 핸들러 객체에서는 정의할 수 있는 메소드들이 있는데 이들을 트랩이라고 합니다. 알아둬야할 트랩 몇가지는 다음과 같은 것들이 있습니다.

트랩	설명(타겟 조작)
get()	타겟 프로퍼티 취득
set()	타겟 프로퍼티 설정
getPrototypeOf()	프로토타입 취득
setPrototypeOf()	프로토타입 설정
has()	in 연산자(객체안에 요소가 포함되었는지)가 동작하는 경우
deleteProperty()	delete 연산자가 동작하는 경우
construct()	new 연산자가 동작하는 경우
apply()	apply에 의한 함수 호출

프록시 객체의 동작을 그림으로 살펴보면 다음과 같습니다. 조작을 했을 때 프록시 객체의 핸들러 내부에 조작에 대한 트랩이 있다면 트랩을 통해 타겟 객체와 상호작용을 하고, 트랩이 없다면 객체와 바로 상호작용을 하면서 동작합니다.

 

다음은 가장 간단한 get 트랩을 통해 프록시 객체를 구현한 코드입니다. 객체 내부에 프로퍼티가 존재하면 프로퍼티를 출력하고 존재하지 않는다면 다른 문구를 띄우는 코드입니다.

let obj = {
    cat: '야옹야옹',
    dog: '멍멍',
}
let proxy = new Proxy(obj, {  //핸들러 객체
    get(target, prop) {  //get 트랩
        return prop in target ? target[prop] : 'prop이 존재하지 않습니다.';
    }
});

console.log(proxy.cat);
console.log(proxy.dog);
console.log(proxy.fish);

 

프록시를 통해 프로퍼티를 조작한다면, 그 내용이 기존 객체에도 반영이 됩니다.

let obj = {
    cat: '야옹야옹',
    dog: '멍멍',
}
let proxy = new Proxy(obj, {
    get(target, prop) {
        return prop in target ? target[prop] : 'prop이 존재하지 않습니다.';
    }
});

proxy.cat = 'Meow'; //프록시 객체 조작

console.log(proxy.cat);

---

참조

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

Proxy - JavaScript | MDN