[Vue.js] nextTick을 사용하여 DOM 업데이트 후 작업 수행하기

<template>
  <div>
    <p v-if="showMessage">{{ message }}</p>
    <button @click="updateMessage">메시지 업데이트</button>
  </div>
</template>

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

const message = ref('기존 메시지');
const showMessage = ref(true);

// 메시지를 업데이트하는 함수
const updateMessage = async () => {
  // nextTick을 사용하여 DOM 업데이트가 완료된 후에 메시지를 변경합니다.
  await nextTick();
  message.value = '새로운 메시지';
};
</script>

<style scoped>
/* 컴포넌트의 스타일을 여기에 작성합니다. */
</style>

Vue.js에서 nextTick을 사용하면 DOM 업데이트가 완료된 후에 작업을 수행할 수 있습니다. 이를 활용하면 Vue 컴포넌트에서 화면이 업데이트된 후에 추가적인 작업을 수행할 수 있습니다.

위의 예제는 nextTick을 사용하여 버튼을 클릭하면 메시지를 업데이트하는 예제입니다. 버튼을 클릭하면 updateMessage 함수가 실행되고, 이 함수 내에서 nextTick을 사용하여 DOM 업데이트가 완료된 후에 메시지를 변경합니다. 이를 통해 사용자가 화면을 볼 수 있는 시점에서 메시지가 변경되도록 보장할 수 있습니다.

nextTick을 사용하면 Vue 컴포넌트에서 비동기 작업을 수행할 때 유용하게 활용할 수 있습니다. 특히 화면 업데이트와 관련된 작업을 수행할 때 활용도가 높습니다.