$nextTick

데이터가 업데이트 되어 페이지가 렌더링 될 때, 또는 UI가 변경될 때,

DOM에 접근하는 작업을 하면 Vue객체가 찾지 못하는 경우가 발생한다. (당연히 에러가 뜨고요.)

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

nextTick이라는 함수는

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

 

<div>
    <div v-for="item in list">
        <div :id="bindId(item)"></div>    <!-- 2 -->
    </div>
</div>
 
<script>
export default {
    name: 'Component',
    data () {
        return {
            list: []
        }
    },
    created () {
        for (var i=0; i<100; i++) {
            this.list.push(i);    // 1
        }
 
        let dom = document.getElementById('item-0');    // 4
        dom.style.backgroundColor = 'red';                // 5
    },
    methods: {
        bindId (item) {
            return `item-${item}`    // 3
        }
    }
    
}
</script>

1번이 진행되고 2번이 순차적으로 다 진행된 후 4번과 5번이 진행되면 너무 좋겠지만,

문제는 1번이 다 진행되기도 전에

즉 UI가 다 변경되기도 전에 DOM에 접근하려는 시도가 있었기 때문에 에러가 뜨게 된다.

 

 

<div>
    <div v-for="item in list">
        <div :id="bindId(item)"></div>   
    </div>
</div>
 
<script>
export default {
    name: 'Component',
    data () {
        return {
            list: []
        }
    },
    created () {
        for (var i=0; i<100; i++) {
            this.list.push(i);  
        }
 
        this.$nextTick(() => {
            let dom = document.getElementById('item-0');  
            dom.style.backgroundColor = 'red';             
        })
    },
    methods: {
        bindId (item) {
            return `item-${item}`
        }
    }
    
}
</script>

 

이런식으로 nextTick()을 선언한 후 DOM에 접근하는 작업을 내부의 콜백함수로 넣어주면

UI가 변경되거나 데이터가 업데이트 된 후 순차적으로 작업이 진행되어 원하는 결과를 얻을 수 있다.