Vue nextTick에 대하여

평소에 잘 몰랐고 사용할 일이 없어 잊혀졌던 nextTick에 대하여 알아보겠습니다.

nextTick

데이터가 업데이트 되어 페이지가 렌더링 될 때, 또는 UI가 변경될 때, DOM에 접근하는 작업을 하면 Vue객체가 찾지 못하는 경우가 발생합니다.

당연히 에러가 뜨고요.

이는 자바스크립트가 비동기적으로 작동되는 원리 때문입니다.

nextTick이라는 함수는 이를 기다려주어 모든 데이터의 업데이트나 렌더링이 끝난 후 DOM에 접근하는 함수를 의미합니다.

에러 예시

<div id="app">
    <div v-for="item in list">
        <div v-bind:id="bindId(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>

1번이 진행되고 2번이 순차적으로 다 진행된 후 4번과 5번이 진행되면 너무 좋겠지만, 문제는 1번이 다 진행되기도 전에 즉 UI가 다 변경되기도 전에 DOM에 접근하려는 시도가 있었기 때문에 에러가 뜨게 됩니다.

그렇다면 nextTick를 사용하여 고친 코드는 어떨까요

nextTick을 사용한 예시)

<div id="app">
    <div v-for="item in list">
        <div v-bind:id="bindId(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
        }
 
     	this.$nextTick(function() { 
        	var dom = document.getElementById('item-0'); 	// 4
        	dom.style.backgroundColor = 'red'; 		// 5
        	}); 
    	}
    },
    methods: {
        bindId: function(item) {
            return 'item-' + item;    // 3
        }
    }
})
</script>

이런식으로 nextTick()을 선언한 후 DOM에 접근하는 작업을 내부의 콜백함수로 넣어주면 UI가 변경되거나 데이터가 업데이트 된 후 순차적으로 작업이 진행되어 원하는 결과를 얻을 수 있습니다.

참조 : https://doozi316.github.io/vuejs/2020/08/10/Vue4/