[Javascript] Proxy 객체

자바스크립트의 Proxy객체란?

프록시의 사전적 정의는 "대리인", "대리"라는 뜻이다. 자바스크립트에서도 뜻 그래도 대리인의 역할을 해주는데 객체의 여러 동작을 가로채(트랩) 다시 정의하는것을 뜻합니다. 해당 기능은 ES6에 새로 추가되었습니다.

 

Vue 2.x 버전에서 객체의 수정 및 삭제를 Object.defineProperty의 getter와 setter를 사용하여 구현하였지만 프로퍼티 변경 시 추적이 어렵다는 이유로 Vue 3.x 부터는 Proxy를 도입했습니다.

사용법

• target은 Proxy의 대상이 되는 객체
• handler는 대상이 되는 객체의 여러 트랩을 정의

const proxy = new Proxy(target, handler);

트랩 핸들러 종류

객체의 속성 트랩 메서드

메서드	작동 시점
get	속성을 읽을 때
set	속성에 값을 쓸 때
has	in 연산자가 작동할 때
deleteProperty	delete 연산자가 작동할 때

메서드 트랩 메서드

메서드	작동 시점
apply	함수를 호출할 때
construct	new 연산자가 작동할 때

객체의 트랩 메서드

메서드	작동 시점
getPrototypeOf	Object.getPrototypeOf 작동할 때
setPrototypeOf	Object.setPrototypeOf 작동할 때
isExtensible	Object.isExtensible 작동할 때
preventExtensions	Object.preventExtensions 작동할 때
getOwnPropertyDescriptor	Object.getOwnPropertyDescriptor 작동할 때
ownKeys	Object.getOwnPropertyNames 작동할 때

예제 코드

const targetObj = {  
  name: '맹구',  
  age: 5  
};  

const handler = {  
  get(target, prop, receiver) {  
    console.log('프로퍼티를 읽을 때 가로채어 로직 실행');  
    console.log('target', target);  
    console.log('prop', prop);  
    console.log('receiver', receiver);  

    return target[prop];  
  },  
  set(target, prop, value, receiver) {  
    // 유효성 검증 가능  
    if (prop === 'name' && value.length < 2) {  
      console.log('이름은 두글자 이상 입력!');  
      return false;  
    }  
    target[prop] = value;  
    return true; // 값을 쓰는게 성공하였으면 true를 반드시 반환  
  }  
};

const proxy = new Proxy(targetObj, handler);
console.log(proxy.name);
proxy.name = '짱구';
console.log(targetObj); // {name: '짱구', age: 5};