nextTick()

• 세부사항
• 반응형 상태를 변경한 결과는 동기적으로 DOM에 업데이트되지 않는다.
• 대신, 이것은 상태를 얼마나 많이 변경했는지에 관계없이 “다음 틱”까지 버퍼링하여, 각 컴포넌트가 한 번만 업데이트 되었음을 보장한다.
• nextTick()은 상태 변경 직후에 DOM 업데이트가 완료될 때까지 대기하는 데 사용할 수 있습니다. 콜백을 인자로 전달하거나, 프로미스(Promise) 반환을 기다릴 수 있습니다.

<script setup>
import { ref, nextTick } from 'vue'

const count = ref(0)

async function increment() {
  count.value++

  // 아직 DOM 업데이트되지 않음.
  console.log(document.getElementById('counter').textContent) // 0

  await nextTick()
  // 이제 DOM 업데이트됨.
  console.log(document.getElementById('counter').textContent) // 1
}
</script>

<template>
  <button id="counter" @click="increment">{{ count }}</button>
</template>

1. count.value++ 라인은 count의 값을 즉시 1 증가시킵니다. 이로 인해 count의 값은 메모리 상에서 이미 1로 변경되었습니다.

2. 그러나 DOM에 대한 업데이트는 비동기적으로 처리됩니다. Vue는 변경 사항을 감지하고 다음 렌더링 프레임에서 실제 DOM 업데이트를 수행합니다.

3. console.log(document.getElementById('counter').textContent)는 첫 번째 console.log로, DOM 업데이트가 아직 수행되지 않았으므로 "0"을 출력합니다.

4. await nextTick()는 Vue의 리액트성 시스템이 현재 프레임의 DOM 업데이트를 처리하고 다음 프레임으로 넘어가길 기다립니다.

5. 다음 프레임에서 Vue는 count의 변경 사항을 반영하여 DOM을 업데이트하고, "0"에서 "1"로 변경됩니다.

6. 두 번째 console.log(document.getElementById('counter').textContent)는 await nextTick() 이후에 실행되며, 이 시점에서 DOM이 업데이트된 결과를 캡처하여 "1"을 출력합니다.