minstudio

Proxy와 Reflect (메타 프로그래밍)

Proxy(프록시) 객체는 특정 객체를 감싸서(Wrap), 그 객체에 대한 기본 동작(속성 읽기, 할당, 함수 호출 등)을 중간에서 가로채고(Intercept) 재정의할 수 있게 해주는 고급 메타 프로그래밍 기능입니다. 주로 Vue 3의 반응형(Reactivity) 시스템, 유효성 검사, 로깅 등에 쓰입니다.

Reflect는 Proxy 안에서 가로챈 동작을 원본 객체에게 안전하게 그대로 전달(포워딩)하기 위해 함께 사용되는 짝꿍 내장 객체입니다.

<script>
console.log("=== Proxy로 객체 조작 가로채기 ===");

const targetUser = {
  name: "Bob",
  age: 20
};

// 프록시를 생성하여 targetUser를 감쌉니다.
// handler 객체에 가로챌 동작(트랩, trap)을 정의합니다.
const handler = {
  // 1. 값 읽기를 가로챔
  get(target, prop, receiver) {
    console.log(`[Log] ${prop} 속성을 읽으려 합니다.`);
    return Reflect.get(target, prop, receiver); // 원본 객체에서 값 꺼내서 반환
  },
  
  // 2. 값 쓰기를 가로챔 (유효성 검사 적용)
  set(target, prop, value, receiver) {
    if (prop === 'age') {
      if (typeof value !== 'number' || value < 0) {
        console.error("🚨 에러: 나이는 0 이상의 숫자여야 합니다!");
        return false; // 할당 실패
      }
    }
    console.log(`[Log] ${prop} 속성을 ${value}(으)로 변경합니다.`);
    return Reflect.set(target, prop, value, receiver); // 원본 객체에 할당
  }
};

const proxyUser = new Proxy(targetUser, handler);

console.log("이름:", proxyUser.name); // get 트랩 발동

proxyUser.age = "서른"; // set 트랩 발동 -> 유효성 검사 실패!
proxyUser.age = 25;   // set 트랩 발동 -> 정상 변경!

console.log("최종 나이:", proxyUser.age);
</script>
실행 결과
Proxy와 Reflect (메타 프로그래밍) | Minstudio