[Vue]Reactivity System, 뷰에서 값이 바뀔 때 일어나는 일

Intro

안녕하세요. 개발자 위성빈입니다. 오늘은 Dynamic Components에 이어서 Vue의 Reactivity 시스템에 대해서 알아보려 합니다. 그저 머릿속에만 있는 거보단 글로 남기는 게 기억도 잘 되고, 글을 쓰면서도 더 찾아보게 되니 참 좋은 거 같아요. 하지만 역시 글을 쓰는 게 쉽진 않네요.

Vue Reactivity

Vue의 장점이라고 하면 꼭 등장하는게 있습니다. 바로 Data Binding입니다. Vue의 데이터 바인딩은 화면에 표시되는 값과 데이터 값이 연결이 되어 서로를 변경시키기 때문에 양방향 데이터 바인딩이라고도 합니다. 그리고 이 양방향 데이터 바인딩이 가능한 이유가 Vue의 Reactivity 시스템 덕분입니다.

Vue Guide Reactivity in Depth 중 일부
Every component instance has a corresponding watcher instance, which records any properties “touched” during the component’s render as dependencies. Later on when a dependency’s setter is triggered, it notifies the watcher, which in turn causes the component to re-render.

Vue 공식 가이드에서 Reactivity 시스템을 설명해주는 페이지의 일부를 가져와봤습니다. 이 부분은 한글 번역본보단 영어 쪽이 좀 더 이해하기 쉽더군요. 짧은 글이지만 사실 Vue의 Reactivity 시스템을 관통하는 내용은 모두 들어가 있습니다.

 

1. 모든 컴포넌트 인스턴스는 watcher 인스턴스를 가진다.

2. watcher 인스턴스는 touched된 properties를 기록한다.

3. setter가 트리거 되면 watcher에 Notify. 컴포넌트가 다시 랜더링 된다.

 

그 밑에는 그림으로도 Vue의 Reactivity 시스템을 보실 수도 있습니다.

Vue의 Reactivity 동작 방식

Vue의 Reactivity 시스템에 대한 이해는 짧은 글과 하나의 그림으로도 사실 충분합니다. 하지만 저는 실제로 이 시스템이 어떻게 구현되어 있을까가 한번 더 궁금했습니다. 그래서 차례대로 콘솔에 찍어보거나 소스 코드를 분석하며 알아봤습니다.

Vue Reactivity 시스템 코드 분석 결과

제가 분석했던 결과를 원래 그림에 녹여봤습니다. Data의 getter와 setter가 reactiveGetter와 reactiveSetter로 바뀌고(vue/src/core/observer/index.js), Watcher 안에는 deps라는 속성에 생겼습니다(vue/src/core/observer/watcher.js). 그리고 원래 그림으로는 알 수 없었던 Dep이란 객체에 대해 알게되었죠.(vue/src/core/observer/dep.js)

 

/**
 * A dep is an observable that can have multiple
 * directives subscribing to it.
 */
export default class Dep {

    // ...

  depend () {
    if (Dep.target) {
      Dep.target.addDep(this)
    }
  }

  notify () {
    // stabilize the subscriber list first
    const subs = this.subs.slice()
    if (process.env.NODE_ENV !== 'production' && !config.async) {
      // subs aren't sorted in scheduler if not running async
      // we need to sort them now to make sure they fire in correct
      // order
      subs.sort((a, b) => a.id - b.id)
    }
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update()
    }
  }
}

 

그중에서도 reactiveGetter(혹은 reacitveSetter)에서 Object.defineProperty를 활용하는 방법은 신기했습니다. 알고는 있었던 함수였지만 ‘아~ 이렇게 사용하면 되는구나’하게 되는 부분이었습니다.(이 부분은 또 다른 글에서 적어볼게요!)

Computed

computed: {
  componentLoader() {
    return () => import(`@/components/${this.currentTab}`)
  },
}

 

그렇다면 이전에 보았던 Computed는 어째서 이 Watcher 객체에 기록이 되지 않았을까요? 사실 이 부분의 해답을 얻기 위해서는 위에서 알아냈던 부분들만으로는 부족했습니다. Computed가 어떻게 생성되는지를 봐야 가능했죠. 결론부터 이야기해드리면 ‘Touch가 일어나는 시점의 차이’가 그 원인입니다.

 

computed: {
  CASE1() {
    return () => this.currentTab
  },
  CASE2() {
    return this.currentTab
  }
}

이해를 돕기 위해 간단히 코드를 가져와봤습니다. CASE 1은 componentLoader와 마찬가지로 제대로 동작하지 못합니다. 하지만 CASE2는 정상 동작하죠. 차이점은 CASE1은 함수를 return 한다는 점입니다. 바로 이 부분 때문에 코드가 실행되는 시점이 차이가 나게 됩니다.

실제로 CASE 1과 같은 coponentLoader를 찍어보면 이런 모습으로 보입니다. computedLoader가 호출될 때에는 즉, Vue에 Computed가 등록될 때에는 아직 코드가 실행이 되질 않은 거죠.

Ending

Vue의 Reactivity 시스템을 알아봤습니다만 이것보다 훨씬 복잡한 기능들이 숨어있겠지요. 그래도 이렇게 분석하면서 어떻게? 왜?라는 의문점도 풀렸고, ‘이런 식으로 사용할 수 있구나’라는 좋은 경험을 얻게 된 시간이었습니다.

 

(이 글에서 활용했던 소스 코드는 이곳에서 확인 가능하십니다.)