[JavaScript] 프록시(Proxy) 객체

프록시 객체는 어떤 대상의 기본적인 동작(속성 접근, 할당, 순회, 열거, 함수 호출 등)의 작업을 가로채서 특별한 다른 동작(트랩)을 할 수 있게 하는 객체를 뜻한다.

 

자바스크립트에서 프록시 객체는 두 개의 매개변수를 가진다.

• target : 프록시할 대상
• handler : target의 동작을 가로채고 어떠한 다른 동작을 할 것인지 설정되어 있는 함수

프록시는 아래와 같이 정의한다.

const proxy = new Proxy(target, handler)

 

먼저 핸들러가 없는 아래 코드와 같은 프록시라면 어떻게 될까?

const target= {};
const proxy = new Proxy(target, {}) //핸들러가 없는 proxy 객체 정의

proxy.test = 5; // 1. proxy에 새로운 프로퍼티 'test' 추가
console.log(proxy.test) // 2. proxy의 test 프로퍼티를 읽을 수 있다. 당연히 5가 출력
console.log(target.test) // 3. 원래 객체인 target의 test 프로퍼티에도 5가 저장된다

만약 핸들러가 선언되지 않은 프록시라면, target 객체를 감싸는 투명한 래퍼(wrapper)가 된다.

그럼 이제 어떤 동작이 발생했을 때 작업을 가로채서 다른 동작을 할 수 있는지에 대해서 대표적으로 아래의 경우가 있다.

대표적으로 get과 set의 예시 코드를 살펴보면서 익혀보자

get

const handler = {
	get: function(target, prop){
    	return prop=='name'? `${target.a} ${target.b}` : target[prop]
    }
}

const p = new Proxy({a:'KUNDOL', b:'IS AMUMU ZANGIN'}, handler);
console.log(p.name); //KUNDOL IS AMUMU ZANGIN

프록시 객체의 get 함수는 타겟의 어떤 속성을 읽을 때 트랩을 발동한다. 

get 함수는 보통 2개의 매개변수를 입력받는다.

• target : new Proxy 선언 시 첫 번째 인자로 주었던 target 객체
• prop : 조회한 속성의 이름

target으로 a 속성과 b 속성을 가지고 있는 객체를 넣고, handler 함수를 매개변수로 넣어서 p라는 변수에 선언했다.

이후 p의 name 속성을 참조해서 handler 함수의 get 안에 선언한 함수가 실행된다.

이 경우에 참조한 속성의 이름이 'name'일 경우 a, b 속성 값을 합쳐서 문자열을 만들어 리턴하고, 아닐 경우 target의 참조한 속성을 리턴하는 로직에 따른다. 

이와 같이 특정 속성에 접근할 때 그 부분을 가로채서 어떤 로직을 강제로 수행할 수 있다.

 

Set

const target= {};
const proxy = new Proxy(target, {
	set(target, prop, value){
      console.log(target,prop, value)
    }
})

proxy.test = 5; // 출력: {} test 5

set 함수는 타겟의 어떤 속성에 값을 쓸 때 트랩을 발생한다. 

set 함수에서 보통 3개의 매개변수를 입력받는다. 

• target : new Proxy 선언 시 첫 번째 인자로 주었던 target 객체
• prop : 작성한 속성의 이름
• value: 작성한 속성의 값

위 코드에서 proxy 객체의 'test'라는 속성에 접근해서 핸들러의 set 함수가 발동했고, 각각 타켓과 접근한 속성 이름, 속성 값을 출력했다.