Proxy : 대리
Proxy는 JavaScript에서 객체의 기본 동작(예: 속성 접근, 할당, 열거, 함수 호출 등)을 사용자 정의 동작으로 가로채서(trap) 조작할 수 있게 해주는 기능입니다.
즉, 객체에 대한 작업을 가로채서 그 작업이 수행되기 전, 수행된 후, 또는 작업을 완전히 대체하여 추가적인 로직을 실행할 수 있게 해줍니다. 이런 특징 때문에 Proxy는 다양한 고급 작업과 패턴에 유용하게 사용될 수 있습니다.
const target = {
message1: "hello",
message2: "everyone",
};
const handler1 = {};
const proxy1 = new Proxy(target, handler1);
proxy1.message1 = 'hi';
console.log('target', target);위의 코드에서 target의 message1 속성의 값은 hi로 변경되게 된다.
아래 예제를 통해 Proxy로 할 수 있는 다양한 가능성을 살펴보겠다.
1. 속성 읽기 접근 제어
속성을 읽을 때마다 로그를 출력하도록 합니다. get은 속성값을 가져오기 위한 trap(가로채기)이다.
(...)
const handler1 = {
get(target, prop, receiver) {
console.log(`속성 '${prop}'에 접근함`);
return Reflect.get(...arguments);
}
};
const proxy1 = new Proxy(target, handler1);
console.log(proxy1.message1); // 속성 'message1'에 접근함 -> hello
console.log(proxy1.message2); // 속성 'message2'에 접근함 -> everyoneProxy는 반드시 new 키워드로만 생성가능하다.
2. 속성 쓰기 접근 제어
속성에 값을 할당할 때 유효성 검사를 추가합니다. 예를 들어, message1에는 오직 문자열만 할당될 수 있게 합니다.
(...)
const handler1 = {
set(target, prop, value) {
if (prop === "message1" && typeof value !== "string") {
throw new Error("message1은 문자열이어야 합니다.");
}
target[prop] = value;
return true; // 성공적으로 값을 할당했음을 나타냄
}
};
const proxy1 = new Proxy(target, handler1);
proxy1.message1 = "안녕하세요"; // 성공
try {
proxy1.message1 = 123; // Error: message1은 문자열이어야 합니다.
} catch (e) {
console.error(e.message);
}
3. 속성 존재 여부 확인
객체에 특정 속성이 있는지 확인할 때마다 로그를 출력합니다.
const handler1 = {
has(target, prop) {
console.log(`${prop} 속성이 객체에 존재하는지 확인`);
return prop in target;
}
};
const proxy1 = new Proxy(target, handler1);
console.log('message1' in proxy1); // message1 속성이 객체에 존재하는지 확인 -> true
console.log('message3' in proxy1); // message3 속성이 객체에 존재하는지 확인 -> false
이외에도 다양한 Handler Function을 통해 객체의 기본동작을 정의하고 유연하게 사용할 수 있다.
Proxy생성자와 Handler Function에 대해서는 다음 문서를 참고
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy
Proxy() constructor - JavaScript | MDN
The Proxy() constructor creates Proxy objects.
developer.mozilla.org
'Study > JavaScript' 카테고리의 다른 글
| [JavaScript] 기본 (0) | 2021.10.18 |
|---|---|
| html + javascript 기초 (0) | 2021.01.07 |
| 자바스크립트 - 의사 결정 (0) | 2017.03.28 |
| 자바 스크립트 기초 - 함수, 메서드, 객체 (0) | 2017.03.27 |
