자바스크립트 Proxy와 Reflect, 객체 제어의 새로운 방법!
Proxy는 객체의 기본 동작을 가로채 커스텀 로직을 추가하는 도구이며, Reflect는 원래 동작을 안전하게 수행하도록 돕는 짝꿍
get 트랩(get trap)과 set 트랩(set trap)을 통해 프로퍼티 읽기/쓰기를 가로채 유효성 검사 및 반환 값 제어 가능
트랩 안에서 Reflect를 통해 원래 동작을 위임하는 것이 안전하며 권장되는 패턴
Vue 3의 reactive()와 같이 프론트엔드 프레임워크에서 반응형 시스템(Reactive System) 구현에 핵심적으로 활용
Proxy의 핵심 개념: Target, Handler, Trap
자바스크립트(JavaScript) Proxy는 객체의 특정 동작을 가로채 추가 로직을 실행하도록 해주는 도구이다. Proxy를 이해하기 위해서는 세 가지 핵심 개념을 알아야 한다.
Target: Proxy가 감싸는 원본 객체
Handler: 가로채는 동작을 정의하는 객체
Trap: Handler 안에 정의된 메서드로, 특정 동작을 가로채는 “함정”
Handler에 아무런 트랩도 정의하지 않으면, Proxy는 원본 객체에 대한 동작을 그대로 통과시킨다. 이러한 구조를 통해 객체의 동작을 세밀하게 제어할 수 있다.
get 트랩과 set 트랩: 프로퍼티 접근 제어
Proxy의 트랩(Trap)은 객체의 기본 동작을 가로채는 역할을 하며, get 트랩과 set 트랩은 프로퍼티 접근을 제어하는 데 사용된다. get 트랩은 객체의 프로퍼티를 읽는 동작을 가로채며, set 트랩은 객체의 프로퍼티에 값을 할당하는 동작을 가로챈다.
get 트랩: 프로퍼티를 읽을 때 원래 값을 가공하거나 제어 가능
set 트랩: 값 할당 전에 유효성 검사(Validation) 등을 수행
set 트랩은 target, prop, value 세 가지 매개변수를 받으며, 반드시 true 또는 false를 반환해야 한다. 이러한 트랩을 통해 객체의 프로퍼티 접근을 정교하게 관리할 수 있다.
Reflect: 안전한 기본 동작 위임
Reflect는 자바스크립트(JavaScript) 내장 객체로, 객체에 대한 기본 동작을 메서드 형태로 제공한다. 트랩 안에서 원래 동작을 수행해야 할 때 Reflect를 사용하면 안전하게 위임할 수 있다.
Reflect.get(): getter 안에서 this로 사용될 객체 지정 가능
상속 관계(Inheritance)에서의 문제 해결
트랩 안에서 원하는 로직을 수행한 후, Reflect를 통해 원래 동작을 위임하는 것이 가장 안전하고 권장되는 패턴
Reflect를 사용하면, 객체의 기본 동작을 안전하게 유지하면서 추가적인 로직을 구현할 수 있다.
Proxy의 활용 사례와 주의사항
Proxy는 Vue 3의 reactive()와 같은 프론트엔드 프레임워크에서 반응형 시스템(Reactive System) 구현에 핵심적으로 사용된다. Vue 3는 Object.defineProperty() 대신 Proxy를 선택하여 객체에 대한 대부분의 기본 동작을 가로챌 수 있도록 했다.
성능 오버헤드(Performance Overhead): 트랩 호출 시 추가 함수 실행으로 대량 데이터 처리 시 주의
내장 객체(Built-in Object) 호환성 문제: Map, Set, Date 등 내부 슬롯에 의존하는 객체는 Proxy로 감싸면 정상 작동하지 않을 수 있음
Proxy는 강력한 도구이지만, 위와 같은 주의사항을 고려하여 신중하게 사용해야 한다.
