$nextTick()

Vue DOM 조작 시 주의해야 할 점

Vue.js에서 data 가 업데이트되고 난 직후 UI가 갱신될 때 Vue가 DOM을 찾지 못하는 경우가 발생하기도 한다. DOM의 변경사항을 비동기적으로 업데이트하기 때문이다.

 

예를 들어, created 훅에서 DOM을 조작하려고 할 때는 아직 DOM 생성이 되기 전이므로 태그를 찾지 못하게 된다.

 

created는 인스턴스가 작성된 후 동기적으로 호출되며 mounted보다 먼저 호출되기 때문에 가상돔을 조작할 수는 없다. mounted는 el에 인스턴스가 마운트된 직후 호출되어 가상돔 조작이 가능하다.

 

created: function() {
    var dom = document.getElementById('item1');
    dom.style.backgroundColor = 'blue';
}

 

item1이라는 id를 가진 요소의 배경색을 파란색으로 변경하는 코드이다. 아직 돔이 생성되지 않아 item1이라는 id를 가진 요소를 찾지 못해 오류가 발생한다.

 

 

$nextTick()

Vue에서는 이러한 오류를 방지하기 위해 데이터 갱신, UI 변경 등 DOM의 모든 변경사항이 완전히 반영된 후 로직을 실행할 수 있도록 nextTick()을 제공한다. $nextTick 콜백 함수 안에서 DOM을 조작하면 Vue에서 데이터 갱신 후 UI까지 모두 그린 후에 수행하기 때문에 태그를 찾지 못하는 오류를 막을 수 있다.

 

created: function() {
	this.$nextTick(function() {
    	var dom = document.getElementById('item1'); 
        dom.style.backgroundColor = 'blue';
    }); 
}

 

위 코드를 nextTick()을 사용하는 코드로 변경하면, 데이터 변경 후 DOM 업데이트를 마칠 때까지 기다렸다가 콜백을 호출하므로 정상적으로 동작하게 된다.

 

$nextTick() + async/await

$nextTick()은 Promise를 반환하므로 async/await 문법을 사용하여 더 깔끔하게 작성할 수 있다. 참고로 await 는 async 안에서만 동작한다.

 

async created() {
	await this.$nextTick();
    // 해야 할 작업 작성
    ...
}