JavaScript의 Proxy 객체는 대상 객체(target)나 함수를 감싸는(wrap) 특수한 객체입니다. 속성 접근, 함수 호출, 값 할당과 같은 기본적인 객체 연산의 동작을 가로채어(intercept), 개발자가 원하는 사용자 정의 로직을 실행할 수 있도록 해줍니다.
Proxy는 두 가지 핵심 요소로 구성됩니다.
- Target(대상) : 프록시가 감쌀 원본 객체 또는 함수
- Handler(핸들러) :
get,set,apply등 '트랩(trap)'이라 불리는 메서드를 정의하여 각 연산을 가로채는 역할
다음은 JavaScript에서 Proxy 객체를 활용한 예제 코드입니다.
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
font-size: 18px;
font-weight: 500;
color: red;
}
</style>
</head>
<body>
<h1>JavaScript Proxy() Object</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to access object values using proxy object
</h3>
<script>
let sampleEle = document.querySelector('.sample');
const test = {
Name: 'Rohan Sharma',
birthYear: 1990,
};
const handler = {
get: function(target, objectKey) {
if (objectKey === 'FirstName') {
return target.Name.split(' ')[0];
}
if (objectKey === 'CurrentAge') {
let date = new Date();
return date.getFullYear() - target.birthYear;
} else {
return Reflect.get(target,objectKey);
}
}
};
const proxy1 = new Proxy(test, handler);
document.querySelector('.Btn').addEventListener('click',()=>{
sampleEle.innerHTML += 'proxy1.Firstname = ' + proxy1.FirstName + '<br>';
sampleEle.innerHTML += 'proxy1.CurrentAge = ' + proxy1.CurrentAge + '<br>';
})
</script>
</body>
</html>코드 설명
위 예제에서는 test라는 이름의 원본 객체와 handler 객체를 정의한 뒤, new Proxy(test, handler)를 통해 프록시 인스턴스를 생성합니다.
핸들러 내부의 get 트랩은 객체의 속성에 접근할 때마다 호출되며, 다음과 같은 사용자 정의 동작을 수행합니다.
- FirstName 접근 시 : 원본 객체의
Name값을 공백 기준으로 분리하여 첫 번째 단어(이름)만 반환합니다. - CurrentAge 접근 시 : 현재 연도에서
birthYear(출생 연도)를 빼서 나이를 실시간으로 계산해 반환합니다. - 그 외의 경우 :
Reflect.get()을 사용해 원본 객체의 기본 동작을 그대로 위임합니다.
이처럼 Proxy를 활용하면 실제로 존재하지 않는 속성에 접근하더라도 계산된 값을 마치 원래 속성인 것처럼 제공할 수 있습니다.
출력 결과
'CLICK HERE' 버튼을 클릭하면 아래와 같은 결과가 화면에 표시됩니다.
