[JS] Proxy객체 맛보기 - 1단계

 

이 글은, 여러 Proxy관련 글을 찾아봤지만, 잘 이해가 안되어 기본부터 정리해보자 적어보는 글이다. 
[6.21작성시작 - 수정예정] 

 

 

---

 

1. 정의.

Proxy 객체는 다른 객체를 감싸서(wrap) 그 객체의 기본 동작을 변경할 수 있게 해주는 객체이다.

 

1-1. 새 Proxy 객체 생성

const proxy = new Proxy(target, handler);

1. Proxy객체	handler 객체와 target  객체 두 개의 인자를 받아서 생성된다.
2. target객체	proxy할 원본 객체를 말한다. (Proxy 객체가 감싸고 있는 객체)
2. handler 객체	trap이라는 메소드를 정의하는 객체다.
3. trap	target  객체의 기본 동작을 가로채서 변경하는 메소드다.

 

 

2. 예시1. get 트랩(trap)

get 트랩(trap)은 Proxy 객체의 속성에 접근할 때 호출되는 메서드이다. 

이 트랩은 tatget, prop, receiver 세 개의 인자를 받는다.

 

다음 코드를 살펴보자.

const target = { message: 'hello' };
const handler = {
  get: function (target, prop, receiver) {
    return 'world';
  },
};
const proxy = new Proxy(target, handler);

이 코드에서 handler 객체는  get 트랩(trap)을 정의하고 있다.

이 트랩은 proxy 객체의 속성에 접근할 때 호출된다. 

proxy.message 속성에 접근하면 'world' 문자열이 반환된다.

 

console.log(proxy.message); //'world'

이제 proxy.message 속성에 접근하면 'world'문자열이 반환되므로, target.message 속성의 값은 무시된다.

 

위와같이,  Proxy 객체를 사용하면 다른 객체의 기본 동작을 변경할 수 있다.

이 기능은 다양한 상황에서 유용하게 사용될 수 있다.

예를들어, 데이터 바인딩, 유효성 검사, 속성 접근 제어 등에 사용될 수 있다. 

 

 

2-2. 예시2. set 트랩(trap)

set트랩(trap)은 Proxy 객체의 속성에 값을 할당할 때 호출 되는 메서드이다.

이 트랩은 target, prop, value, receiver 네 개의 인자를 받는다.

target	Proxy객체가 감싸고 있는 객체다.
prop	할당하려는 속성의 이름이다.
value	할당하려는 값이다
receiver	Proxy 객체 자체이다.

다음 코드에서는 target 객체르 감싸는 proxy 객체를 생성한다.

const target = { message: 'hello' };
const handler = {
  set: function (target, prop, value, receiver) {
    if (prop === 'message') {
      value = value.toUpperCase();
    }
    return Reflect.set(target, prop, value, receiver);
  },
};
const proxy = new Proxy(target, handler);

이 코드에서 handler 객체는 set 트랩(trap)을 정의하고 있다.

이 트랩은 proxy.message = 'world'와 같이 proxy 객체의 속성에 값을 할당할 때 호출된다.

 

이 트랩은 할당하려는 속성의 이름이 'message'인 경우에만 값을 변경한다.

이 경우에는 할당하려는 값을 대문자로 변경한다.

그리고 이 트랩은 Reflect.set() 메소드를사용하여 target 객체의 속성에 값을 할당ㅎ나다.

 

proxy.message 속성에 값을 할당하면, 이 값이 대문자로 변경된다.

proxy.message = 'world';
console.log(proxy.message); // 'WORLD'

이제 proxy.message 속성에 값을 할당하면, 이 값이 대문자로 변경되므로, target.message 속성의 값도 대문자로 변경된다.

 

이처럼 set 트랩(trap)을 사용하면 , Proxy 객체의 속성에 값을 할당하는 동작을 변경할 수 있다.