vue.$NextTick이란?

Vue.js logo

vm.$nextTick  

 해당 메서드는 다음 렌더링 사이클 이후 실행될 콜백 함수를 등록할 수 있는 기능을 제공하는 메서드이다.

 이 말은 즉, $nextTick의 콜백 함수 안에서 DOM을 조작하면, 데이터를 가지고 화면을 그리기 전에 DOM이 먼저 생성되며 원하는 트리(태그)를 찾지 못하는 오류를 막을 수 있다.  

created : function() {
    this.$nextTick(function(){
        var item = document.getElementById('textBox');
        item.style.backgroundColor = 'green';
    });
}

 

$nextTick은 await/async와도 함께 사용 가능하다고 한다.  

methods : {
    async doSomething(){
        await this.$nextTick();
    }
}

 

추가로 vm.$forceUpdate이란?

 이 메서드는 인스턴스를 강제로 다시 렌더링시킨다. 다른 컴포넌트나 인스터스에 영향을 끼치지 않고 해당 메서드가 실행된 인스턴스만 다시 렌더링된다.  

 

언제 사용할까?  

Vue의 상태는 변경되었으나 화면에 변경된 상태가 반영되지 않는 경우 이 메서드를 사용하며 다시 렌더링하며 반영시킬 수 있다.

하지만.. 렌더링은 작업 자체가 비용이 많이 들기 때문에 과도하게 사용할 시 애프리케이션의 성능이 하락할 수 있다.

//다음 예제는 강제로 랜더링하는 소스코드이다.

<div id="app">
  <h1>{{Math.random()}}</h1>
  <button @click="update">Force Update</button>
</div>


methods:{
  update(){
    this.$forceUpdate();
  }
}


//https://reactgo.com/vue-force-update-component/

 

$forceUpdate와 $nextTick 같이 사용하기

 아래의 소스는 promise 메서드(api 호출)로 데이터가 변경되고 바인딩이 안되는 경우 문제를 해결할 수 있다.

[promise 메서드].then(function(data){
    if(data.code == '00'){
    	// 데이터 변경
        this.goodsListLength = data.goodsList.slice(0, 10).length;
        
        // 강제 렌더링
        this.$forceUpdate();
        
        // 렌더링 이후에 필요한 작업 수행
        this.$nextTick(function(){

        }.bind(this));
    }
}.bind(this));

 

끝 맺는 말  

 회사의 기획전 개발을 진행하면서 Vue에 대한 매서드들의 개념을 다뤄보았다. 앞으로도 Vue를 사용하기 위한 개념들을 포스팅하며 다루어보자

---

성장에 도움을 주신 많은 개발자분 감사합니다!

출처 1 : https://y-chyachya.tistory.com/11  

출처 2 : https://doozi316.github.io/vuejs/2020/08/10/Vue4/  

오늘도 감사합니다.