[Vue] nextTick()

vue를 사용하다가 DOM 업데이트 된 이후에 작업이 필요한 경우에 코드를 작성하고 진행하지만, undefined에러 등 원하지 않는 결과가 나올 때가 있다. 그럴 때 다양한 해결 방법들이 있지만, 그 중 nextTick에 대해서 찾아보았다.

nextTick() 개념

function nextTick(callback?: () ⇒ void): Promise

• 다음 DOM 업데이트 발생을 기다리는 유틸리티이며 Vue 내부 전역 API 공식 문법이다.

  • 전역 API에는 defineComponent 등이 있음

• 상태 변경 직후 DOM 업데이트가 완료될 때까지 대기하는데 사용한다.

• DOM에 대한 업데이트는 비동기적으로 처리된다. Vue는 이를 감지하고 실제 DOM 업데이트를 수행

• 이 과정에서 DOM이 업데이트 되더라도 실제 렌더링이 브라우저에서 완료되기까지 지연이 존재 할 수 있다.

상황

• 나의 경우에는 mounted 훅에서 template ref에 연결된 변수의 값에 해당하는 이벤트 호출을 하고자 하였다.
• 그러나, undefined가 나오게 되었다.
• 내 생각에는 mounted훅이 DOM이 렌더링 된 이후에 호출되므로 사용할 수 있을 것 같았다.
  • 즉, DOM의 렌더링이 곧장 업데이트가 완료된 시점을 의미하는 것은 아니다
  • 그렇기에 위와 같이 template ref로 연결하였을 때 undefined가 나왔던 것이다.
• nextTick은 DOM 업데이트와 브라우저 렌더링을 안전하게 기다린 후 실행한다.

예시

[ 방법 1 ]
onMounted(async () => {
  console.log('1'); // 바로 실행

  // nextTick 호출
  await nextTick();
  console.log('2'); // DOM 업데이트 후 실행
});

[ 방법 2 ]
onMounted(() => {
  console.log('1');
  nextTick().then(() => {
    console.log('2');
  });
});

• 근데 async/await을 사용하는 이유는 무엇일까? 그냥 nextTick()만 사용하면 안되나…?

  onMounted(() => {
    console.log('1');
    nextTick(); // Promise는 반환되지만 기다리지 않음
    console.log('2'); // DOM 업데이트 여부와 관계없이 실행
  });
  

  • DOM 업데이트가 완료된 시점에서 nextTick은 Promise를 반환해서 resolve한다.
  • 즉, await를 사용하지 않으면 호출 직후 코드가 계속 실행되어 안전하게 DOM 업데이트 확인이 되지 않는다.