Proxy는 JavaScript 객체에 대한 접근을 가로채서 중간에서 원하는 동작을 끼워 넣을 수 있는 기능이다. Vue 3의 반응형 시스템이 이 위에서 동작하고, MobX도 같은 방식을 쓴다.
Vue 3를 공부하다가 reactive()로 감싼 객체의 프로퍼티를 직접 수정했는데 화면이 자동으로 업데이트되는 걸 보고 신기했다. React에서는 반드시 setState를 호출해야 하는데, Vue는 그냥 obj.count++만 해도 자동으로 반응성을 유지하는데, 내부에서 어떤 일이 일어나고 있을까?
Proxy 이전에 라이브러리는 어떻게 만들어졌을까?
전에는 SPA 라는 개념 자체가 생소했고, MPA 개념으로 웹을 주로 사용해왔다. Proxy 라는 강력한 기능이 나오기 전에는 SPA 라이브러리는 어떻게 구성이 되었는지 너무 궁금했다.
현재는 React와 Vue를 섞어쓰다보니 메이저 버젼이 바뀌면서 아예 내부 패러다임이 변경된 Vue를 기준으로 알아보자면 Vue 3 이전, Vue 2는 Object.defineProperty()로 반응형을 구현했다.
// Vue 2 방식 (단순화)
function defineReactive(obj, key, value) {
Object.defineProperty(obj, key, {
get() {
// 의존성 추적
track(key)
return value
},
set(newValue) {
value = newValue
// 변경 알림
trigger(key)
}
})
}
Object.defineProperty는 이미 존재하는 프로퍼티의 getter/setter만 가로챌 수 있다. 그래서 Vue 2에는 구조적인 한계가 있었다.
// Vue 2에서 반응형이 동작하지 않는 경우
const state = Vue.observable({ items: [] })
state.items.push('new item') // ← 배열 변경 미감지 (일부 메서드만 패치됨)
state.newProp = 'hello' // ← 새로운 프로퍼티 추가 미감지
delete state.items // ← 삭제 미감지
이 문제를 해결하려고 Vue 2는 배열 메서드를 직접 패치하고, Vue.set()이라는 특별한 API를 만들었다. 근본적인 해결이 아니라 우회였다.
2015년 ES6에 Proxy가 추가됐다. Vue 3는 2020년에 이 Proxy를 기반으로 반응형 시스템을 완전히 재설계했다.
Proxy의 내부 동작
new Proxy(target, handler)는 target 객체를 감싸는 래퍼를 만든다. 이 래퍼에 대한 모든 작업(읽기, 쓰기, 삭제 등)이 handler의 트랩(trap) 을 통해 가로채진다.
WeakMap을 쓰는 이유는 target 객체가 가비지 컬렉션될 때 자동으로 정리되기 때문이다.
get 트랩 — 의존성 수집
// Vue 3 내부 (단순화)
let activeEffect = null // ← 현재 실행 중인 effect
function get(target, key, receiver) {
const result = Reflect.get(target, key, receiver)
// activeEffect가 있으면 이 키를 의존성으로 등록
track(target, key)
// targetMap[target][key].add(activeEffect)
return result
}
set 트랩 — 변경 알림
function set(target, key, value, receiver) {
const result = Reflect.set(target, key, value, receiver)
// 이 키에 등록된 모든 effect를 실행
trigger(target, key)
// targetMap[target][key].forEach(effect => effect())
return result
}
전체 흐름
import { reactive, effect } from '@vue/reactivity'
const state = reactive({ count: 0 }) // ← Proxy 생성
effect(() => {
// 1. activeEffect = 이 함수로 설정
// 2. state.count 읽기 → get 트랩 → track() 호출
// → targetMap[state]["count"].add(현재 effect)
console.log(state.count)
// 3. activeEffect = null
})
state.count = 1
// → set 트랩 → trigger() 호출
// → targetMap[state]["count"]에 등록된 effect 실행
// → 콘솔에 1 출력
실제 실행 순서를 단계별로 보면 이렇다.
1. reactive({ count: 0 }) 호출
→ new Proxy(target, handler) 생성
2. effect(fn) 호출
→ activeEffect = fn
→ fn() 실행
→ state.count 읽기
→ get 트랩 발동
→ track(state, "count")
→ targetMap.get(state).get("count").add(fn)
→ 0 반환
→ activeEffect = null
3. state.count = 1 실행
→ set 트랩 발동
→ Reflect.set으로 원본 업데이트
→ trigger(state, "count")
→ targetMap.get(state).get("count")
→ [fn] 실행
→ 콘솔에 1 출력
reactive()로 감싼 객체의 프로퍼티를 직접 수정해도 화면이 업데이트되는 이유가 이것이다. 할당 연산자(=)가 set 트랩을 발동시키고, 그게 등록된 effect들을 실행한다.
get 트랩이 user를 반환할 때, 반환값이 객체이면 그 객체도 Proxy로 감싸서 반환한다. 중첩 깊이에 상관없이 반응형이 동작하는 이유다.
get(target, key, receiver) {
const result = Reflect.get(target, key, receiver)
track(target, key)
// 반환값이 객체이면 재귀적으로 reactive 적용
if (typeof result === 'object' && result !== null) {
return reactive(result) // ← 이미 Proxy면 캐시에서 반환
}
return result
}
Vue 3의 반응형 시스템 핵심은 세 가지(reactive, track, trigger)다.
* effect() 는 세 가지를 사용하는 부수 효과와 같은 소비자 역할이라 직접적인 영향을 주지는 않는다. 이 effect() 는 ref나 reactive가 내부 로직에서만 쓰인다면 활성화되지 않지만, 해당 반응형 값이 템플릿 문법에 쓰이게 되면 Vue가 컴포넌트를 마운트할 때 렌더 함수 자체를 effect로 등록해준다.
reactive() — 객체를 Proxy로 감싸서 반응형으로 만든다
effect() — 반응형 데이터를 읽는 함수를 등록한다
track() — get 트랩에서 현재 effect를 의존성으로 기록한다
trigger() — set 트랩에서 의존성에 등록된 effect를 실행한다
reactive() — Proxy로 감싸기
const state = reactive({ count: 0 })
state.count를 읽을 때, 쓸 때 중간에 끼어들 수 있게 Proxy로 감싼다.
•
get 트랩 → track() 호출
•
set 트랩 → trigger() 호출
effect() — "이 함수를 반응형으로 만들겠다" 선언
effect(() => {
console.log(state.count) // 이 줄이 실행될 때 track()이 호출됨
})
effect 안의 함수를 즉시 한 번 실행한다. 실행되는 동안 "지금 실행 중인 effect = 나야" 라고 전역에 표시하는 작업이다.
track() — 의존성 기록
get 트랩에서 호출되며, 지금 실행 중인 effect가 있다면 state.count ↔ 이 effect 연결을 저장한다.
이 연결 정보가 Map에 쌓이게 된다 : state.count → [effect1, effect2, ...]
trigger() — 의존성 실행
state.count = 1 // 여기서 trigger()
set 트랩에서 실행이되며, state.count에 연결된 effect를 모두 꺼내서 다시 실행한다.
실제로 템플릿에 ref , reactive 가 포함될 때는 아래와 같은 일이 발생한다.
컴포넌트 마운트
→ Vue 내부에서 effect(렌더 함수) 등록
→ 렌더 함수 실행
→ 템플릿에서 count.value 읽힘
→ track() → "렌더 effect ↔ count.value" 연결
// <template><div>{{ count }}</div></template>
// 컴파일 결과
function render() {
return h('div', count.value) // 가상 DOM 생성
}
// 아래 effect에 등록이 된다.
// count.value가 변경되면 trigger → 아래 렌더 함수 재실행 → DOM 업데이트 진행
effect(() => {
const vnode = render() // 가상 DOM 생성
patch(prevVnode, vnode) // 실제 DOM 업데이트
})
React는 왜 Proxy를 채택하지 않을까?
Vue를 사용하게 되면 자연스럽게 비교하게 되는 대상인데,
React도 Proxy를 쓰면 setState 없이 그냥 state.count++만 해도 될 텐데 왜 쓰지 않을까?
이건 React의 설계 철학과 아키텍처 전체와 연결된 문제이기도 하다.
이유 1 — React의 상태 업데이트는 의도적으로 명시적이다
React의 핵심 원칙 중 하나는 UI = f(state)다.
상태가 바뀌면 그 결과로 UI가 결정된다. 여기서 중요한 건 상태 변경이 추적 가능하고 예측 가능해야 한다는 것이다.
// React의 방식 — 명시적
setCount(prev => prev + 1)
// 누가, 언제, 어디서 상태를 바꿨는지 명확히 알 수 있다
// Proxy 방식이었다면
count++
// 어디서 변경이 일어났는지 추적하기 어려움
Proxy는 변경을 암묵적으로 가로챈다. 코드 어디서든 객체 프로퍼티를 수정하면 트랩이 발동한다. (Vue가 양방향인 이유이라고 하는 이유이다, 내부적으로 상태를 개발자가 어떻게 변하는지 명시적으로 알 필요가 없다) 이건 편리하지만, 큰 앱에서 상태가 어디서 바뀌는지 추적하기 어렵게 만든다.
