728x90
Vue.js는 컴포넌트가 새로 생성이 되거나, 화면에 그려지는 데이터가 변경될 경우, Virtual DOM에 변경사항을 반영하고, 실제 DOM과 비교해서 달라진 부분만 교체합니다. 이 교체가 모두 완료되고 난 시점에서 실행되는 훅이 mounted입니다.
mounted는 사용자가 사용하는 브라우저의 DOM에 모든 변경사항을 반영하고나서 실행되는 훅입니다. 그런데, Javascript의 비동기 처리 특성때문에 DOM을 탐색하거나 수정하는 로직이 있을 경우, DOM이 갱신이 되기 전에 DOM을 탐색해서 undefined나 null 에러가 발생하는 경우가 있습니다.
이런 상황때문에 Vue.js 프레임워크에서는 DOM에 모든 변경사항이 완전히 반영이 된 후에 사용자 정의 로직을 실행할 수 있도록하는 함수를 가지고 있는데, 그게 바로 nextTick() 함수입니다.
Vue.js 공식문서 인용
Vue.js가 데이터 변경 후 DOM 업데이트를 마칠 때까지 기다리려면 데이터가 변경된 직후에
Vue.nextTick (콜백)을 사용할 수 있습니다. 콜백은 DOM이 업데이트 된 후에 호출됩니다.
사용방식
nextTick()은 모든 훅에서 사용할 수 있습니다. 보통은 DOM이 모두 완성이 된 후 인, mounted에서 사용하는 것 같습니다.
<html>
<head><!-- ... --></head>
<body>
<div ref="it"></div>
</body>
</html>mounted: function() {
// ...
this.$nextTick(function() {
// mounted로 DOM에 갑자기 생성된 ref="it" 속성을 가지는 div
const dom = this.$refs.it;
dom.style.backgroundColor = '#e1e1e1';
});
}
728x90
'Vue.js' 카테고리의 다른 글
| spa 새로고침 not found (0) | 2021.03.04 |
|---|---|
| [Vue.js] 2- vue-cli 프로젝트 생성하기 (0) | 2021.01.22 |
| [Vue.js] mixin이란 (0) | 2020.12.22 |
| [vue.js] 맨날 까먹는 props와 emit으로 컴포넌트 간에 값 전달하기 (0) | 2020.12.20 |
| [Vue 실전편]props의 데이터 변화 감지를 위한 watch 사용법 (0) | 2020.12.19 |
댓글