[JavaScript] Proxy와 Reflect에 대해 알아보자

Proxy와 Reflect

 

 

Proxy 객체는 기본적인 동작의 새로운 행동을 정의할 때 사용한다. 여기서 말하는 기본적인 동작이란 속성 접근, 할당, 순회, 열거, 함수 호출 등을 말한다. proxy 객체를 생성할 때는 new 라는 생성자를 호출해야 한다. 아래 구문처럼 필수적으로 2개의 인자를 받는다. 

 

구문

new Proxy(target, handler);

 

매개변수

target : proxy와 함께 감싸진 target 객체 (native array, function, 다른 proxy를 포함한 객체)

handler : property이 function인 객체이다. 동작을 수행할 때, handler는 proxy의 행동을 정의한다.

 

DOM node 조작

2개의 다른 element의 속성이나 클래스의 이름을 바꾸고 싶을 때 get, set 을 사용한다. 

const myObj = {name: 'miffy', changedValue: 0};

const proxy = new Proxy(myObj, {
  get: function(target, property, receiver) {
    console.log('get value');
    return target[property];
  },
  set: function(target, property, value) {
    console.log('set value');
    target['changedValue']++;
    target[property] = value;
  }
})

myObj 에서 name 값을 변경할 때마다 set value 가 찍히는 것을 확인할 수 있다. 값이 변경될 때마다 changedValue 값이 1씩 증가하는 것이다. 

 

위 구문에서 return 부분에

return Reflect.get(target, property);

 

으로 변경 가능하다. 

 

Reflect 란 Proxy 와 같이 JavaScipt 명령어를 가로챌 수 있는 메서드를 제공하는 내장 객체이다. Reflect는 함수 객체가 아닌 일반 객체이다. Reflect 를 사용하면 에러 핸들링이나 반영을 구현하면 더 깔끔한 코드를 작성할 수 있다.

 

참고

- MDN 문서- 인프런 모던 자바스크립트(javascript) 개발을 위한 ES6 강좌