Proxy trap + Reflect — 가로채기와 기본 동작

참고: MDN Proxy / Reflect, ECMA-262 Proxy objects

객체의 get/set을 가로채고 싶을 때 Proxy를 쓴다.

trap은 가로채는 훅이고, Reflect는 기본 동작(내부 메서드에 가까운 것)을 함수로 부른다.

flowchart LR
  CALL[obj.x / obj.x=] --> P[Proxy]
  P --> T[trap get/set]
  T -->|기본 유지| R[Reflect.get/set]
  R --> TGT[target]

const target = { n: 1 };
const proxy = new Proxy(target, {
  get(t, prop, receiver) {
    console.log('get', prop);
    return Reflect.get(t, prop, receiver);
  },
  set(t, prop, value, receiver) {
    if (prop === 'n' && typeof value !== 'number') {
      throw new TypeError('n must be number');
    }
    return Reflect.set(t, prop, value, receiver);
  },
});

proxy.n; // 로그 후 1
proxy.n = 2;

trap을 쓸 때 Reflect로 기본 동작을 이어 주면 receiver·프로토타입 위임이 덜 깨진다.

get만 막고 set·has·ownKeys를 안 맞추면 전개·도구가 어긋난다.

실무: 유효성·로깅·읽기 전용 뷰. 남용하면 디버깅 비용이 커진다.

자주 쓰는 trap

get, set, has, deleteProperty, ownKeys, defineProperty, apply, construct…

질문 → 자답

Q. defineProperty로 충분하냐?

A. 기존 키 제어엔 디스크립터. 미래 키·일괄 가로채기는 Proxy.

Q. 반응형이랑 같냐?

A. 반응형 엔진 쪽에 Proxy가 있다. 구독·invariant 설계는 별도다.