Proxy 사용하기

proxy를 사용하면 기존 이벤트를 가로채 다른 함수를 실행할 수 있다.

간단한 예를 보면, 다음과 같다.

const target = {
    a: "a_word",
    b: "b_word",
}

const handler = {
    get(target, prop, receiver) {
        switch(prop){
            case 'a':
                return "A";
            case 'b': 
                return "B";
        }
    }
}

const proxy = new Proxy(target, handler);
console.log(proxy.a, proxy.b);

기존의 객체를 가로채어 다른 값을 return하게 만든다.

handler가 기존의 실행을 가로채어 실행되는 함수로, switch나 if문 등을 사용하여 특정 key값의 객체값만 다른 값으로 return하게 할 수 있다.

이와 같은 컨셉을 Reflect를 사용하여 다음과 같이 더 편하게 표현할 수도 있다.

const target = {
    a: "a_word",
    b: "b_word",
}

const handler = {
    get(target, prop, receiver) {
        if(prop === 'a') {
            return "AAA";
        }
        return Reflect.get(...arguments);
    }
}

const proxy = new Proxy(target, handler);
console.log(proxy.a, proxy.b);

Relect는 Proxy 생성을 간소화하는 내장객체이다.

 

🍋 Proxy의 가장 대표적인 쓰임새는 Observable 설계이다. 구독자를 설정(get)하고, 구독자에게 값의 변경(set)을 알릴 수 있다.

 

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

Proxy - JavaScript | MDN

https://ko.javascript.info/proxy

Proxy와 Reflect