[개발] Vue.js에서 nextTick 사용하기

Vue.$nextTick

요즘 갑작스럽게 인기가 많아진 Front-end Framekwork인 Vue.js의 대해서 이야기해볼까합니다.
Vue.js가 무엇인지 말하기에는 공식문서 한글화도 잘 되어있고, 국내 Vue.js커뮤니티에서도 현재 활발하게 여러가지 주제를 가지고 이야기를 하고 있기에 따로 설명하지는 않겠습니다.
Vue.js를 어느정도 사용하고 있다가 데이터와 UI를 건드리는 상황에서 간헐적으로 DOM을 못찾는 상황을 겪어보셨을지 모르겠습니다. 겪지 않으셨더라도 언제가는 겪게 될 일이죠. (저는 이미 이 일을 겪게 되었습니다.)

네트워크 요청을 하던가, 어떤 데이터를 vue._data에 삽입하자마자 삽입 후에 갱신될 UI의 대해서 DOM을 탐색하여 처리할려고 하면 해당 DOM을 못찾아서 콘솔화면에 빨간색의 글자로 오류들을 내뿜게 됩니다.
이는 vue._data에 값들을 대입하게 되면 Vue.js에서 데이터갱신을 감지하고 UI를 갱신하게 되는데, 모든 데이터처리가 비동기로 처리되는 JavaScript의 특성때문에 UI가 갱신도 되기전에 DOM들을 탐색하는 상황이 나오게 됩니다.

	<!-- 오류 예제 -->
	<div id="app">
	<div v-for="item in list">
	<div v-bind:id="bindId(item)">{{item}}</div> <!-- 2 -->
	</div>
	</div>
	<script>
	new Vue({
	el: '#app',
	data: function() {
	return {
	list: []
	};
	},
	created: function() {
	var self = this;
	for(var i=0; i<100; i++) {
	this._data.list.push(i); // 1
	}
	var dom = document.getElementById('item-0'); // 4
	dom.style.backgroundColor = 'red'; // 5
	},
	methods: {
	bindId: function(item) {
	return 'item-' + item; // 3
	}
	}
	})
	</script>

view raw vuejs.nexttick.error.example.html hosted with ❤ by GitHub

위와 같은 상황으로 작성하게 되면 오류가 나게 됩니다.
간단하게 설명을 드리면 1에서 list에 데이터들을 넣게 됩니다. Vue.js는 이를 감지하여 2, 3을 통해 UI들을 갱신하게 되는데, UI를 갱신하기전에 1의 다음 라인인 4,5를 수행하게 됩니다. 아직 그리지도 않은 UI를 호출하려하니 당연히 오류가 나겠죠? Vue.js에서는 이런 일이 일어날 것을 예측하고, callback함수를 제공하고 있습니다.

	created: function() {
	// ...
	this.$nextTick(function() {
	var dom = document.getElementById('item-0');
	dom.style.backgroundColor = 'red';
	});
	}

view raw vuejs.nexttick.example.js hosted with ❤ by GitHub

nextTick으로 감싼뒤 callback을 통해 DOM을 조작하게 되면 Vue.js에서 데이터갱신 후 UI까지 완료한 뒤에 nextTick에 있는 함수를 최종적으로 수행하게 됩니다.

nextTick이 자주사용되기는 하는데 예제를 만들기가 애매한 부분이 있는 것 같습니다. 최대한 간단하게 설명하려다보니 위 코드대로 알려드리게 되었습니다. 더 좋은 의견이 있거나 좋은 예제가 있으면 언제든지 말씀해주시면 감사하겠습니다.

관련자료

• Vue.nextTick 공식API문서
• Vue.js 한국어 사용자 모임
• jsfiddle 예제