[JavaScript 문법] 33일차: Proxy와 Reflect

Proxy 객체란?

Proxy 객체는 다른 객체를 감싸고, 그 객체에 대한 기본 작업(속성 접근, 할당, 함수 호출 등)을 가로채서 재정의할 수 있는 강력한 기능을 제공합니다. Proxy 객체는 두 개의 인수를 받습니다: 목표 객체(target)와 핸들러(handler) 객체입니다.

 

기본 사용법

let target = {};
let handler = {};

let proxy = new Proxy(target, handler);

핸들러 트랩

핸들러 객체는 다양한 트랩(trap)을 정의할 수 있습니다. 트랩은 Proxy 객체가 수행할 작업을 가로채는 메서드입니다.

주요 트랩

1. get: 속성 접근을 가로챕니다.
2. set: 속성 할당을 가로챕니다.
3. has: in 연산자를 가로챕니다.
4. deleteProperty: delete 연산자를 가로챕니다.
5. apply: 함수 호출을 가로챕니다.
6. construct: new 연산자를 가로챕니다.

예제: get 트랩

let target = {
  message: 'Hello, World!'
};

let handler = {
  get: function(target, property, receiver) {
    if (property === 'message') {
      return 'Proxy says: ' + target[property];
    }
    return target[property];
  }
};

let proxy = new Proxy(target, handler);

console.log(proxy.message); // 'Proxy says: Hello, World!'

예제: set 트랩

let target = {
  message: 'Hello, World!'
};

let handler = {
  set: function(target, property, value, receiver) {
    if (property === 'message') {
      console.log('Setting message:', value);
    }
    target[property] = value;
    return true;
  }
};

let proxy = new Proxy(target, handler);

proxy.message = 'Hello, Proxy!'; // 'Setting message: Hello, Proxy!'
console.log(target.message); // 'Hello, Proxy!'

Reflect API

Reflect API는 JavaScript의 기존 메서드와 동일한 기능을 제공하는 정적 메서드 모음입니다. Reflect 메서드는 Proxy 트랩을 구현할 때 유용하며, 목표 객체에 대한 기본 동작을 수행하는 데 사용됩니다.

주요 메서드

1. Reflect.get: 객체의 속성을 반환합니다.
2. Reflect.set: 객체의 속성 값을 설정합니다.
3. Reflect.has: 객체에 속성이 있는지 확인합니다.
4. Reflect.deleteProperty: 객체의 속성을 삭제합니다.
5. Reflect.apply: 함수를 호출합니다.
6. Reflect.construct: 객체의 인스턴스를 생성합니다.

예제: Reflect.get

let target = {
  message: 'Hello, World!'
};

let handler = {
  get: function(target, property, receiver) {
    return Reflect.get(target, property, receiver);
  }
};

let proxy = new Proxy(target, handler);

console.log(proxy.message); // 'Hello, World!'

예제: Reflect.set

let target = {
  message: 'Hello, World!'
};

let handler = {
  set: function(target, property, value, receiver) {
    return Reflect.set(target, property, value, receiver);
  }
};

let proxy = new Proxy(target, handler);

proxy.message = 'Hello, Proxy!';
console.log(target.message); // 'Hello, Proxy!'

Proxy와 Reflect의 장점

1. 유연한 객체 조작: Proxy를 사용하면 객체의 기본 동작을 가로채고 재정의할 수 있습니다.
2. 리팩토링 지원: Proxy와 Reflect를 사용하면 코드 리팩토링 시 객체의 동작을 쉽게 조작할 수 있습니다.
3. 디버깅 및 로깅: Proxy를 사용하여 객체의 동작을 로깅하거나 디버깅하는 데 유용합니다.

Proxy와 Reflect의 단점

1. 성능 오버헤드: Proxy를 사용하면 추가적인 성능 오버헤드가 발생할 수 있습니다.
2. 호환성 문제: 일부 구형 브라우저에서는 Proxy와 Reflect를 지원하지 않을 수 있습니다.

결론

Proxy와 Reflect는 JavaScript에서 객체의 동작을 가로채고 재정의할 수 있는 강력한 도구입니다. 이번 글에서는 Proxy 객체의 기본 개념과 주요 트랩, Reflect API의 주요 메서드, Proxy와 Reflect의 장점과 단점에 대해 배웠습니다. 다음 글에서는 JavaScript 성능 최적화에 대해 알아보겠습니다.

다음 글에서 만나요!