[VUE] Composition API - watch, watchEffect

Composition API에서 watch와 watchEffect는 반응형 데이터를 감시할 때 사용되지만, 작동 방식과 사용 목적에 차이가 있습니다.

 

 

 

📌watch (명시적인 감시 대상)

watch는 특정 반응형 변수를 감시하여 값이 변경될 때만 실행됩니다.

<template>
    <div>
        <p>count : {{ count }}</p>
        <button @click="count++">count 증가</button>
    </div>
</template>

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

    const count = ref(0);

    // count 값이 변경될 때마다 실행되는 watch
    watch(count, (newVal, oldVal) => {
        console.log(`count값이 ${oldVal}에서 ${newVal}로 변경되었습니다.`)
    })
    
</script>

 

 

✅ 출력 값

 

✅ button 클릭 후 출력 값

 

✅ button 클릭 후 콘솔

 

✅ 특징

• count를 명시적으로 감시
• 값이 변경될 때만 콜백 실행
• 기본적으로 처음 한 번 실행되지 않음

 

 

 

 

📌watchEffect (자동 감지)

watchEffect는 내부에서 사용된 반응형 데이터를 자동으로 감지하여 실행됩니다.

<template>
    <div>
        <p>count : {{ count }}</p>
        <button @click="count++">count 증가</button>
    </div>
</template>

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

    const count = ref(0);

    // count가 사용되었으므로 자동 감지됨
    watchEffect(() => {
        console.log(`count 값 : ${count.value}`)
    })
</script>

 

 

✅ 출력 값

 

✅ button 클릭 전 콘솔(컴포넌트가 마운트 될 때 watchEffect가 실행되므로 콘솔이 찍힙니다.)

 

 

✅ button 클릭 후 출력 값

 

✅ button 클릭 후 콘솔

 

 

✅ 특징

• count를 명시적으로 지정하지 않아도 자동으로 추적
• 컴포넌트가 마운트될 때 즉시 실행
• 내부에서 사용된 반응형 변수를 모두 감지

 

📌watch, watchEffect 차이점

비교항목	watch	watchEffect
사용 목적	특정 반응형 데이터 변경 감지	관련된 반응형 데이터 자동 감지
종속성 추적 방식	감시할 변수를 명시적으로 지정	내부에서 자동으로 감지
콜백 실행 시점	값이 변경될 때 실행	즉시 실행 후, 종속된 값이 변경될 때 실행
초기 실행 여부	기본적으로 X (immediate: true 옵션 필요)	기본적으로 즉시 실행
비동기 처리	O (비동기 로직 가능)	O (비동기 로직 가능)
Deep 감지 필요 여부	deep: true 옵션 필요	자동으로 deep 감지

 

 

 

📌watch, watchEffect 선택 기준

✅ watch 선택

• 특정한 반응형 데이터만 감시하고 싶을 때
• 이전 값과 새로운 값을 비교해야 할 때
• 실행을 제어하고 싶을 때 (초기 실행 X)

✅ watchEffect 선택

• 감시할 변수를 명확히 지정하지 않고 자동으로 추적하고 싶을 때
• 여러 반응형 변수를 한 번에 감지하고 싶을 때
• 반응형 데이터가 변경될 때 즉시 효과를 적용하고 싶을 때

 

 

 

📌결론

• watch는 특정 변수를 감시할 때 사용합니다.
• watchEffect는 내부에서 사용된 모든 반응형 변수를 자동 감지합니다.
• 초기 실행이 필요한 경우 watchEffect가 더 적합합니다.
• 이전 값과 비교해야 하면 watch가 더 적합합니다.