[Vue.js] 공식 가이드 문서 요약 (5) - 반응형

Vue 주요 특징 중 하나는 reactive 즉, 반응형 시스템이라는 것이다. 모델은 단순한 Javascript 객체이며, 수정하면 화면이 갱신되는 방식이다. state 관리를 간단하고 직관적으로 만들어주지만 공통점을 제거하기 위해 어떻게 작동하는지 이해하는것이 중요하다.

[변경 내용을 추적하는 방법]

Vue 인스턴스에 JavaScript 객체를 data 옵션으로 전달하면 Vue는 모든 속성에 Object.defineProperty를 사용하여 getter/setter로 변환한다. 이는 Vue가 ES5를 사용할수 없는 IE8이하를 지원하지 않는 이유이다.

getter/setter는 사용자에게는 보이지 않으나 속성에 액세스 하거나 수정할 때 Vue가 종속성 추적 및 변경 알림을 수행할 수 있다. vue-devtools 크롬확장을 설치하면 편리하게 개발할 수 있다.

모든 컴포넌트 인스턴스에는 해당 watcher 인스턴스가 있으며, 이 인스턴스는 컴포넌트가 종속적으로 렌더링되는 동안 "수정"된 모든 속성을 기록한다. 나중에 종속적인 setter가 트리거되면 watcher에 알리고 컴포넌트가 다시 렌더링 된다.

[변경 감지 유의점]

최신 Javascript의 한계로 인해 Vue는 속성의 추가/제거를 감지할 수가 없다. Vue는 인스턴스 초기화 중에 getter/setter 변환 프로세스를 수행하기 때문에 data 객체에 속성이 있어야 Vue가 이를 변환하고 응답할 수 있다.

var vm = new Vue({
	data: {
		a: 1 // 반응형
	}
})

vm.b = 2 // 반응형 아님

Vue는 이미 만들어진 인스턴스에 새로운 루트 수준의 반응 속성을 동적으로 추가하는 것을 허용하지는 않는다. 그러나 Vue.set(object, key, value) 메소드를 사용하여 중첩된 객체에 반응성 속성을 추가/변경할 수 있다.

Vue.set(vm.someObject, 'b' ,2)
this.$set(this.someObject, 'b', 2)

[반응형 속성 선언]

Vue는 루트 수준의 반응성 속성을 동적으로 추가할 수 없으므로 모든 루트 수준의 데이터 속성을 빈값으로라도 초기에 선언하여 Vue 인스턴스를 초기화해야 한다.

var vm = new Vue({
	data: {
		// 빈값으로 메시지 선언
		message: ''
	},
	template: '
{{ message }}
'
})
// 나중에 ₩message₩를 설정
vm.message = 'Hello!'

data 옵션에 message를 선언하지 않으면 Vue는 렌더 함수가 존재하지 않는 속성에 접근하려 한다고 오류를 출력한다.

data 객체는 컴포넌트 상태에 대한 스키마와 같다. 모든 반응 속성을 미리 선언하면 나중에 다시 코드를 읽게 되거나, 다른 개발자가 읽을때 구성 요소 코드를 더 쉽게 이해할 수 있다.

반응형프로그래밍은 observer.. 등을 통해 발생되는 액션에 리액션하는것... pub/sub, observer 패턴의 의도를 가지고 이해하면 조금더 접근이 쉬워질수 있다.