Proxy(프록시) 객체는 특정 객체를 감싸서(Wrap), 그 객체에 대한 기본 동작(속성 읽기, 할당, 함수 호출 등)을 중간에서 가로채고(Intercept) 재정의할 수 있게 해주는 고급 메타 프로그래밍 기능입니다. 주로 Vue 3의 반응형(Reactivity) 시스템, 유효성 검사, 로깅 등에 쓰입니다.
Reflect 는 Proxy 안에서 가로챈 동작을 원본 객체에게 안전하게 그대로 전달(포워딩)하기 위해 함께 사용되는 짝꿍 내장 객체입니다.
Copyconsole.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);