디자인 패턴 (2) 구조 - Proxy 패턴

본 글은 하단의 링크의 글들을 공부하며 필사한 글임.

 

Proxy 객체란?

프록시 객체는 특정 객체와의 인터렉션을 조금 더 용이하게 컨트롤 할 수 있게 도와준다.
마치 은행계좌와 신용카드, 현금이 있는경우 신용카드는 현금의 프록시로 작용한다.
결제라는 같은 인터페이스를 구현하며, 소비자는 현금을 잃어버리거나 일일이 관리하지도 않아되는 편리함이 존재합니다.

ex) 특정 객체의 값을 설정하거나 값을 조회할 때 등의 인터렉션을 직접 제어할 수 있다. 

여기서 프록시(proxy)란 무언가의 대리인으로, JS에서도 해당객체를 다루는 것이 아닌 Proxy 객체와 인터렉션하게 된다.

const student = {
  name: "minkyu",
  age: 25,
  major: "computer",
};

const studentProxy = new Proxy(student, {});

Proxy인스턴스를 생성해 student객체에 직접 인터렉션하지 않고 Proxy객체와 인터렉션 한다.

여기서 Proxy 클래스의 두 번째 인자는 인터렉션에 종류에 맞는 동작을 정의하는 곳으로, 핸들러를 의미한다.

 

Proxy 객체 활용하기

일반적으로 get (프로퍼티에 접근), set (프로퍼티의 값을 수정)이 해당된다

studentProxy 객체에 다음과 같이 핸들러를 추가할 수 있다.

const student2 = {
  name: "minkyu",
  age: 25,
  major: "computer",
};

const studentProxy2 = new Proxy(student2, {
  get: (obj, prop: string) => {
    console.log(`The value of ${prop} is ${obj[prop]}`);
  },
  set: (obj, prop: string, value) => {
    obj[prop] = value;
    console.log(`Changed ${prop} from ${obj[prop]} to ${value}`);
    return true;
  },
  // 타입스크립트에서 Proxy 객체의 set 트랩은 반드시 boolean 값을 반환해야함
});

student2.name;
student2.age = 43;

동작

personProxy.name;
personProxy.age = 43;

다음과 같이 값을 읽고 수정하는 경우 Proxy의 get, set메소드가 호출되며
첫 번째와 같이 name 프로퍼티 접근하는 경우 get에 해당하는 console문이 실행되게 된다.
두 번째와 같이 age 프로퍼티를 수정하는 경우엔 set 메소드에 해당하는 console문이 실행되며 이때 출력되는 나이는 43으로 수정된 값이 출력된다.

 

Proxy의 용도

proxy는 유효성 검사를 구현하는데 주로 사용된다.

Ex) get메소드에 if(obj[prop]) 같은 조건을 통해 프로퍼티가 존재하는지 검사한다던가
Ex) set 메소드에서 typeof 로 타입을 확인해 type에 맞는 값으로만 수정하도록 할 수 있다.

=> Proxy는 해당 객체를 실수로 수정하는 것을 예방해 데이터를 안전하게 관리가 가능하다.
(type script기능과 유사?)

 

Reflect와 사용

JS에서 제공하는 빌트인 객체인 Reflect와 Proxy를 함께 사용해 obj[prop] 형태로 프로퍼티에 접근하거나 수정하는 대신 Reflect.get, set을 통해 가능하며 핸들러 객체의 같은 이름의 메서드 사용이 가능하며 각 메서드는 인자를 동일하게 가진다.

const studentProxy3 = new Proxy(student2, {
  get: (obj, prop: string) => {
    console.log(`The value of ${prop} is ${Reflect.get(obj, prop)}`);
  },
  set: (obj, prop: string, value) => {
    console.log(`Changed ${prop} from ${obj[prop]} to ${value}`);
    return Reflect.set(obj, prop, value);
  },
});

 

결론

Proxy는 객체의 동작을 커스터마이징하는 유용한 기능이며, Proxy를 통해 유효성 검사 포매팅 알림, 디버깅 등 사용된다.

다만, 핸들러 객체에서 Proxy를 과도하게 사용하는 경우 앱의 성능에 부정적 영향을 줄 수 있으므로 성능문제가 발생하지 않는 선에서 사용하자.

추가로 대부분의 타입스크립트 앱에서 프록시 패턴은 발견되지 않으나 일부 특별한 경우엔 요기하게 사용될 수 있다.

---

.참고

https://refactoring.guru/ko/design-patterns

디자인 패턴들

 

https://readystory.tistory.com/114

디자인 패턴(Design Pattern)이란?

 

https://patterns-dev-kr.github.io/design-patterns/introduction/

Design Pattern 소개