[Vue] nextTick

개요

Vue 3에서 nextTick은 Vue의 반응형 시스템과 DOM 업데이트 사이클과 관련된 중요한 함수다. 이 함수는 Vue가 데이터 변경을 감지하고 해당 변경사항을 DOM에 반영한 직후에 실행되는 콜백을 스케줄링하는 데 사용된다.

DOM 업데이트는 비동기적으로 수행되기 때문에, 데이터가 변경되었을 때 즉시 DOM이 업데이트되지 않을 수 있다. nextTick을 사용하면 Vue가 현재 렌더링 사이클에서 모든 DOM 업데이트를 완료한 직후에 특정 코드를 실행할 수 있도록 예약할 수 있다. 이는 DOM이 완전히 업데이트된 상태에서 작업을 수행해야 할 때 유용하다.

사용 사례

nextTick은 주로 다음과 같은 경우에 사용된다.

• 데이터 변경 후 DOM이 업데이트된 것을 확인하고 추가적인 DOM 조작이 필요한 경우.
• 데이터 변경 후 특정 DOM 요소의 최종 상태를 기반으로 계산이나 조작을 수행해야 하는 경우.

예시 코드

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

const message = ref('안녕하세요');

function updateMessage(newMessage) {
  message.value = newMessage;
  nextTick(() => {
    // DOM 업데이트 후 실행될 코드
    console.log('DOM이 업데이트되었다.');
  });
}
</script>

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage('안녕히 가세요')">Update Message</button>
  </div>
</template>

이 코드에서 updateMessage 함수는 메시지를 업데이트하고 nextTick을 사용하여 DOM 업데이트가 완료된 후 로그를 출력한다.

결론

nextTick은 Vue의 반응형 시스템과 DOM 업데이트 사이클을 더 잘 제어하고자 할 때 매우 유용하다. 이를 통해 개발자는 데이터 변경 후 DOM이 완전히 업데이트된 시점에 필요한 로직을 안정적으로 실행할 수 있다.