Vue.js

용어 정리

A2 = A0 + A1일때, A2가 A0과 A1의 결과에 따라 자동으로 변하게 하려면 JS에선 아마 아래와 같은 방식으로 로직을 짜야할 것이다.

let A2

function update() {
...
  A2 = A0 + A1
...
}

위의 예제가 보여주는 교훈은, JS는 언어차원에서 제공하는 반응형이란 개념이 원래 없다는 것이다.

어쨌거나 위와같은 함수를 이용해 반응형을 만든다고 하면, 다음과 같이 용어를 정리할 수 있다.

1. 사이드 이펙트
   • update() 함수는 프로그램의 상태를 수정한다. 이런 프로그램의 상태 변경을 ‘사이드 이펙트’ 또는 ‘이펙트’라고 한다.
2. 의존성
   • A0 과 A1 은 이펙트를 수행하는데 필요하다. 따라서 이펙트의 ‘**의존성’**으로 간주된다.
3. 구독자
   • 이펙트(상태 수정)는 의존성(상태 수정의 재료)에 대한 구독자(subscriber) 라고한다.

이 구독자라는 단어가 안어울릴 수도 있다고 생각하지만, 다음의 설명을 보자.

어떤 반응형 객체를 전역 변수로 만들고, (이를 보통 store라고 한다.) 이 스토어를 구독한 컴포넌트는 상태가 바뀔때 알림( 이를 보통 트리거라고 한다.)을 받아 화면을 업데이트 한다.

위와같은 기술을 통해 에서 왜 구독, 구독자라는 단어가 사용되었는지 직관적으로 와닿길 바란다…

이제 위의 용어로 다시 반응형을 설명해보자. 우리에게 필요한건 의존성이 변경될때마다 이펙트를 호출하는 함수이다.

이 함수를 whenDepsChange() 라고 명명해보자.

whenDepsChange(update)

이제 이 함수가 하는 일은 다음과 같다.

1. 의존성 변수들이 평가되는 순간을 추적한다. update 내부의 A0 + A1 표현식이 평가될때 해당 변수들의 값을 읽는다.(추적)
2. 현재 실행중인 이펙트가 있을때 변수를 읽으면 실행중인 이펙트를 해당 변수의 구독자로 만든다. 말이 어렵지만, update() 가 실행될때 내부의 A0 과 A1 이 읽히는건 당연하다. 따라서 update() 는 첫 호출 이후에 이제 A0과 A1의 구독자가 된다.
3. 변수가 언제 변하는지 감지한다. 변수가 변하면, 해당 변수의 구독자 이펙트가 다시 실행되도록 한다.(트리거)