[Vue] nextTick 사용하기

nextTick이란?

Vue 3에서 nextTick 메서드는 Vue가 DOM 업데이트를 완료한 후에 특정 코드를 실행하도록 하는 유용한 함수입니다. 즉, Vue가 데이터 변경에 따라 DOM을 렌더링한 후, 그 결과를 바탕으로 추가적인 작업을 수행하고 싶을 때 사용합니다.

왜 nextTick이 필요한가요?

• 동기적 DOM 업데이트: Vue는 데이터 변경이 감지되면 DOM을 비동기적으로 업데이트합니다. 하지만 DOM 업데이트가 완료되기 전에 DOM 요소에 접근하려고 하면, 아직 업데이트되지 않은 값을 참조하게 되어 예상치 못한 결과가 발생할 수 있습니다.
• DOM 조작: DOM을 직접 조작하거나 라이브러리를 사용하여 DOM을 수정하는 경우, Vue가 DOM을 업데이트한 후에 작업을 수행해야 변경 사항이 반영됩니다.

주의사항

• 비동기적 특성: nextTick은 비동기적이므로, nextTick 내부에서 실행되는 코드는 DOM 업데이트가 완료된 다음에 실행됩니다.
• 반복적인 호출: 불필요하게 nextTick을 반복적으로 호출하면 성능 저하를 야기할 수 있습니다.
• 컴포넌트 라이프사이클: created, mounted, updated 등 컴포넌트 라이프사이클 메서드에서 nextTick을 사용하여 DOM 조작을 수행할 수 있습니다.

 

<template>
  <div>
    <button @click="handleClick">클릭</button>
    <p ref="myParagraph"></p>
  </div>
</template>

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

const message = ref('Hello, Vue!');
const myParagraph = ref(null);

onMounted(() => {
  // DOM이 마운트된 후에 실행
  console.log(myParagraph.value); // DOM 요소에 접근
});

const handleClick = () => {
  message.value = 'World!';
  nextTick(() => {
    console.log(myParagraph.value.textContent); // 업데이트된 DOM 확인
  });
};
</script>

 

1. ref 함수: 상태 관리를 위한 반응형 데이터를 생성합니다.
2. onMounted 훅: 컴포넌트가 마운트된 후에 실행되는 훅입니다. 여기서 DOM 요소에 대한 참조를 얻습니다.
3. handleClick 함수: 버튼 클릭 시 실행되는 함수입니다. message 값을 변경하고, nextTick을 사용하여 DOM이 업데이트된 후에 myParagraph 요소의 텍스트 내용을 확인합니다.

Composition API에서 nextTick 사용 시 주의할 점

• setup 함수 내에서 사용: Composition API에서는 setup 함수 내에서 nextTick을 사용해야 합니다.
• ref 함수를 사용하여 DOM 요소 참조: DOM 요소에 접근하기 위해 ref 함수를 사용하여 참조를 생성합니다.
• async/await와 함께 사용: 비동기 작업 후 DOM 업데이트를 기다릴 때 async/await와 함께 사용할 수 있습니다.

추가 예시:

• 데이터 페칭 후 DOM 업데이트:

  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    items.value = data;
  
    nextTick(() => {
      // 데이터가 업데이트된 후 DOM 조작
    });
  };
  

• 외부 라이브러리와의 통합:

  onMounted(() => {
    nextTick(() => {
      const chart = new Chart(myChart.value, {
        // 차트 설정
      });
    });
  });

다양한 예시

1. DOM 요소 크기 측정 후 스타일 적용

<template>
  <div ref="myDiv"></div>
</template>

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

const myDiv = ref(null);

onMounted(() => {
  nextTick(() => {
    const divWidth = myDiv.value.offsetWidth;
    myDiv.value.style.width = divWidth * 2 + 'px';
  });
});
</script>

DOM이 완전히 렌더링된 후에 myDiv 요소의 너비를 측정하고, 그 값을 기반으로 스타일을 동적으로 적용합니다.

2. 스크롤 위치 조정

<template>
  <button @click="scrollToBottom">스크롤 하단으로</button>
  <div ref="scrollableDiv" style="height: 500px; overflow-y: auto"></div>
</template>

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

const scrollableDiv = ref(null);

const scrollToBottom = () => {
  nextTick(() => {
    scrollableDiv.value.scrollTop = scrollableDiv.value.scrollHeight;
  });
};
</script>

버튼 클릭 시, DOM이 업데이트된 후에 scrollableDiv 요소의 스크롤 위치를 하단으로 이동시킵니다.

3. 외부 라이브러리 (Chart.js)와의 통합

<template>
  <canvas ref="myChart"></canvas>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import Chart from 'chart.js/auto';

const myChart = ref(null);

onMounted(() => {
  nextTick(() => {
    const ctx = myChart.value.getContext('2d');
    new Chart(ctx, {
      // 차트 설정
    });
  });
});
</script>

DOM이 완전히 렌더링된 후에 myChart 요소를 이용하여 Chart.js를 초기화합니다.

4. 데이터 변경 후 로컬 스토리지 저장

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

const count = ref(0);

const increment = () => {
  count.value++;
  nextTick(() => {
    localStorage.setItem('count', count.value);
  });
};
</script>

count 값이 변경된 후, DOM이 업데이트된 후에 localStorage에 값을 저장합니다.

5. 비동기 작업과의 결합

import { ref, nextTick } from 'vue';

const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  items.value = data;

  nextTick(() => {
    // 데이터 업데이트 후 DOM 조작
  });
};

API 호출 후 데이터를 업데이트하고, DOM이 업데이트된 후에 추가 작업을 수행합니다.

Composition API에서 nextTick 사용 시 추가적인 고려 사항

• watch 함수: 데이터 변경을 감시하여 nextTick을 호출할 수 있습니다.
• computed 프로퍼티: 계산된 프로퍼티의 값이 변경될 때 nextTick을 호출할 수 있습니다.
• 커스텀 훅: nextTick을 사용하는 로직을 커스텀 훅으로 만들어 재사용할 수 있습니다.

결론

Composition API에서 nextTick은 Vue 3의 반응형 시스템과 함께 효과적으로 사용하여 DOM 업데이트와 관련된 다양한 문제를 해결할 수 있습니다. 컴포넌트의 상태 변화에 따라 DOM을 동적으로 조작하고, 외부 라이브러리와 통합하는 등 다양한 시나리오에 활용될 수 있습니다.