1편. Mini Vue: 반응성의 큰 그림부터 잡기
Vue를 쓰다 보면 데이터를 바꾸면 화면이 자동으로 업데이트되는 걸 당연하게 여기게 된다. 하지만 그 안에서는 꽤 복잡한 메커니즘이 굴러가고 있다. 이번 시리즈에서는 mini-vue.ts와 reactive-core.ts라는 작은 파일을 직접 뜯어보며 Vue 반응성의 비밀을 이해해 보자.
1. Vue 반응성: 직관적 비유
상상을 해보자. 내가 다이어리에 "밥 먹기"라는 할 일을 적어놓았다. 그리고 친구에게 "내가 할 일 바뀌면 꼭 알려줘"라고 부탁했다고 치자.
- 내가 할 일을 확인할 때 → 친구는 "이제 저 일에 관심이 있구나" 하고 기록한다. → 이것이
track. - 내가 할 일을 고쳤을 때 → 친구는 "야, 네가 봤던 할 일이 바뀌었어!" 하고 알려준다. → 이것이
trigger. - 친구는 바뀔 때마다 내가 할 일을 다시 읽는다. → 이것이
effect.
즉, effect = 반응하는 사람, track = 관심사 등록, trigger = 알림인 셈이다.
2. 실제 코드 구조에서의 큰 흐름
Vue의 작은 심장을 도식으로 그려보면 이렇다:
(1) createApp(App).mount('#app') → 최초 렌더링 실행
│
▼
effect(render) ← 초기 화면을 그릴 때도 render가 effect로 등록
│
상태(state) ── 읽기(get) ──▶ track(등록)
│
│ 쓰기(set)
▼
trigger(알림) ──▶ effect(재실행) ──▶ 화면 다시 그림(render)- 최초 시작:
main.ts에서createApp(App).mount('#app')을 호출한다. 이 과정에서 컴포넌트의render함수가effect로 등록되고, 바로 한 번 실행된다. 이것이 첫 렌더링이다. - reactive / ref: 상태를 감싸서 읽기·쓰기 동작에 갈고리를 건다.
- track: effect가 실행되는 도중 "어떤 상태를 읽었는지"를 기록한다.
- trigger: 상태가 바뀌면 관련 effect에게 "다시 실행하라" 알림을 보낸다.
- effect: 실제로 화면을 그리거나 값을 계산하는 함수. Vue는 이게 다시 실행되면서 화면이 갱신된다.
3. render도 effect다
중요한 사실 하나: 화면을 그리는 render 함수도 결국 effect로 등록된다는 점이다.
mini-vue.ts를 보면, 컴포넌트를 mount할 때effect(updateComponent)로 등록한다.- 즉,
render는 단순히 화면을 그리는 함수가 아니라, reactive 상태를 읽는 하나의 effect. - 그래서 reactive 데이터가 바뀌면
trigger가 render effect를 깨워서 화면을 다시 그린다.
이렇게 이해하면 effect는 단순히 계산식이나 watch 같은 부가 기능뿐만 아니라 렌더링 시스템의 핵심임을 알 수 있다.
4. 키워드 한눈에 정리
| 키워드 | 쉽게 말하면 | 코드 레벨 의미 |
|---|---|---|
| effect | “관찰자(Observer)” | 데이터가 바뀌면 다시 실행될 함수. render도 effect 중 하나 |
| track | “내가 이 데이터에 관심 있어” | 실행 중 읽은 key를 의존성으로 등록 |
| trigger | “야, 바뀌었어!” | 데이터가 바뀌면 관련 effect들을 다시 실행 |
5. 왜 이렇게 복잡하게?
만약 단순히 setInterval로 매번 화면을 통째로 다시 그린다면?
- 바뀌지도 않은 부분까지 매번 렌더링 → 비효율
- 어떤 데이터가 바뀌었는지 알 방법이 없음 → 불필요한 계산 증가
Vue가 똑똑한 이유는 정확히 필요한 곳만 다시 실행하기 때문이다. “누가 무엇을 읽었는지(track)”를 기억하고, “그게 바뀔 때(trigger)”만 “다시 그 사람(effect)”을 깨워 실행한다.
6. 전체 구조도 (조금 더 큰 그림)
┌──────────┐
│ reactive │ → Proxy로 감싸 데이터 get/set 시점에 hook
└─────┬────┘
│ get
▼
track() ← 현재 실행 중 effect에 “관심 데이터” 등록
│
│ set
▼
trigger() ← 관련 effect에게 “너 다시 실행해” 알림
│
▼
effect() ← render 함수까지 포함, 화면 다시 그림요약
Vue의 핵심은 **“상태 변화 → 화면 갱신”**을 자동으로 이어주는 반응성 엔진.
최초 시작은
createApp().mount()로, 이때 render가 effect로 등록되고 즉시 실행되어 첫 화면을 그린다.핵심 키워드 3개:
effect: 반응할 함수. render도 effect다.track: 어떤 데이터에 관심 있는지 등록.trigger: 데이터가 바뀌면 알림 발송.
이 세 가지가 맞물리며 필요한 부분만 다시 실행된다.
2편에서는 이제 이 세 가지(
effect / track / trigger)가 코드로 어떻게 구현돼 있는지, 그리고 의존성 그래프(WeakMap → Map → Set) 구조를 구체적으로 파헤쳐 본다.