[JavaScript] Proxy

Proxy : 대리

 

Proxy는 JavaScript에서 객체의 기본 동작(예: 속성 접근, 할당, 열거, 함수 호출 등)을 사용자 정의 동작으로 가로채서(trap) 조작할 수 있게 해주는 기능입니다.

즉, 객체에 대한 작업을 가로채서 그 작업이 수행되기 전, 수행된 후, 또는 작업을 완전히 대체하여 추가적인 로직을 실행할 수 있게 해줍니다. 이런 특징 때문에 Proxy는 다양한 고급 작업과 패턴에 유용하게 사용될 수 있습니다.

 

const target = {
  message1: "hello",
  message2: "everyone",
};

const handler1 = {};

const proxy1 = new Proxy(target, handler1);

proxy1.message1 = 'hi';
console.log('target', target);

위의 코드에서 target의 message1 속성의 값은 hi로 변경되게 된다.

 

아래 예제를 통해 Proxy로 할 수 있는 다양한 가능성을 살펴보겠다.

1. 속성 읽기 접근 제어

속성을 읽을 때마다 로그를 출력하도록 합니다. get은 속성값을 가져오기 위한 trap(가로채기)이다.

(...)
const handler1 = {
  get(target, prop, receiver) {
    console.log(`속성 '${prop}'에 접근함`);
    return Reflect.get(...arguments);
  }
};

const proxy1 = new Proxy(target, handler1);

console.log(proxy1.message1); // 속성 'message1'에 접근함 -> hello
console.log(proxy1.message2); // 속성 'message2'에 접근함 -> everyone

Proxy는 반드시 new 키워드로만 생성가능하다.

 

2. 속성 쓰기 접근 제어

속성에 값을 할당할 때 유효성 검사를 추가합니다. 예를 들어, message1에는 오직 문자열만 할당될 수 있게 합니다.

(...)
const handler1 = {
    set(target, prop, value) {
        if (prop === "message1" && typeof value !== "string") {
            throw new Error("message1은 문자열이어야 합니다.");
        }
        target[prop] = value;
        return true; // 성공적으로 값을 할당했음을 나타냄
    }
};

const proxy1 = new Proxy(target, handler1);

proxy1.message1 = "안녕하세요"; // 성공
try {
    proxy1.message1 = 123; // Error: message1은 문자열이어야 합니다.
} catch (e) {
    console.error(e.message);
}

 

3. 속성 존재 여부 확인

객체에 특정 속성이 있는지 확인할 때마다 로그를 출력합니다.

const handler1 = {
  has(target, prop) {
    console.log(`${prop} 속성이 객체에 존재하는지 확인`);
    return prop in target;
  }
};

const proxy1 = new Proxy(target, handler1);

console.log('message1' in proxy1); // message1 속성이 객체에 존재하는지 확인 -> true
console.log('message3' in proxy1); // message3 속성이 객체에 존재하는지 확인 -> false

 

이외에도 다양한 Handler Function을 통해 객체의 기본동작을 정의하고 유연하게 사용할 수 있다.

 

Proxy생성자와 Handler Function에 대해서는 다음 문서를 참고

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy

Proxy() constructor - JavaScript | MDN