프록시 패턴 (Proxy Pattern) 쉽게 이해하기

프록시 패턴이란?

• 어떤 객체에 접근할 때
• 직접 접근하지 않고 대신 접근해주는 ‘대리인’ 역할을 하는 디자인 패턴입니다.

---

왜 쓸까?

• 실제 객체에 바로 접근하지 않고,
• 접근을 통제하거나, 실행 전/후에 작업을 추가할 수 있습니다.

예를 들어, 온라인 쇼핑몰에서 결제하기 전에
로그인 상태를 확인하거나 결제 제한을 걸고 싶을 때 사용할 수 있습니다.

 

const realPayment = {
  pay(amount) {
    console.log(`${amount}원 결제 완료!`);
  }
};

const paymentProxy = {
  isLoggedIn: false,
  pay(amount) {
    if (!this.isLoggedIn) {
      console.log('로그인이 필요합니다!');
      return;
    }
    realPayment.pay(amount);
  }
};

// 테스트
paymentProxy.pay(10000); // 로그인 필요 메시지
paymentProxy.isLoggedIn = true;
paymentProxy.pay(10000); // 결제 완료 메시지

 

리액트에서 프록시 패턴 활용하기

Proxy 생성법

const target = { name: "Alice" };

const handler = {
  get(target, prop) {
    console.log(`${prop} 프로퍼티에 접근했습니다.`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`${prop} 프로퍼티를 ${value}로 변경합니다.`);
    target[prop] = value;
    return true; // 성공했음을 알림
  }
};

const proxy = new Proxy(target, handler);

 

• target : 감싸고 싶은 원래 객체
• handler : 동작을 가로챌 함수(트랩)들의 모음

 

Proxy 사용 예시

console.log(proxy.name);  
// "name 프로퍼티에 접근했습니다."
// "Alice"

proxy.name = "Bob";  
// "name 프로퍼티를 Bob로 변경합니다."

console.log(proxy.name);  
// "name 프로퍼티에 접근했습니다."
// "Bob"

 

리액트에서는 프록시 패턴을 사용해 상태 관리를 효율적으로 하거나
API 호출을 감싸서 공통 로직을 처리할 때 쓰기도 합니다.

예를 들어 상태 객체에 Proxy를 씌워서 변경을 감지하는 방식입니다

const state = new Proxy({ count: 0 }, {
  set(target, prop, value) {
    console.log(`${prop} 값이 ${target[prop]}에서 ${value}로 변경됨`);
    target[prop] = value;
    return true;
  }
});

state.count = 1; // 콘솔: count 값이 0에서 1로 변경됨

주요 용도

• 데이터 변경 감지 (예: 상태관리 라이브러리)
• 접근 권한 제어 (예: 읽기 전용 만들기)
• 기본 객체 행동 커스터마이징
• 디버깅 도구로 활용