[Vue] watch

개요

Vue.js에서 watch는 반응형 시스템의 핵심 기능 중 하나이다. 이는 데이터의 변경을 감지하고 그에 대한 콜백 함수를 실행하는 데 사용된다. Vue 3에서 watch 기능은 Composition API의 일부로 재구성되었으며, 더욱 강력하고 유연한 데이터 반응성 관리를 가능하게 한다.

사용법

기본 사용법

watch는 두 가지 주요 인자를 받는다: 반응형 데이터 소스와 그 데이터 소스가 변경될 때 호출되는 콜백 함수이다. 데이터 소스는 반응형 참조(ref) 또는 반응형 객체(reactive)의 특정 속성이 될 수 있다.

<template> <input v-model="userInput" /> </template>
<script setup>
  import { ref, watch } from 'vue';
  const userInput = ref('');
  watch(userInput, (newInput) => {
    if (newInput.length > 10) {
      console.log('사용자 입력이 너무 깁니다.');
    }
  });
</script>

추가 옵션

즉시 실행 옵션

watch는 immediate 옵션과 함께 사용하여 컴포넌트 마운트 시 콜백 함수를 즉시 실행할 수 있다.

<script setup>
  import { ref, watch } from 'vue';
  const myData = ref(0);
  watch(
    myData,
    (newValue) => {
      console.log(`myData가 변경되었다: ${newValue}`);
    },
    { immediate: true },
  );
</script>

깊은 감시 옵션

deep 옵션을 사용하여 객체의 중첩된 속성 변화를 감시한다.

<script setup>
  import { reactive, watch } from 'vue';
  const myObject = reactive({ nested: { count: 0 } });
  watch(
    myObject,
    (newObject) => {
      console.log('객체 내부의 속성이 변경되었다.');
    },
    { deep: true },
  );
</script>

정리(Cleanup) 함수

watch의 콜백에서 정리 함수를 사용하여 이전에 설정한 부수 효과를 정리할 수 있다.

<script setup>
  import { ref, watch } from 'vue';
  const myData = ref(0);
  watch(myData, (newValue, oldValue, onCleanup) => {
    let interval = setInterval(() => console.log(newValue), 1000);
    onCleanup(() => {
      clearInterval(interval);
    });
  });
</script>

결론

Vue 3의 watch 기능은 어플리케이션에서 반응형 데이터의 변경을 감지하고 그에 반응하는 로직을 구현할 때 매우 유용하다.