Vue3의 watch / watchEffect

date

Feb 1, 2023

slug

vue-watch-and-watch-effect

author

status

Public

tags

Vue

summary

type

Post

thumbnail

category

updatedAt

Aug 3, 2025 02:45 PM

watch vs watchEffect – Vue 3 Composition API에서의 반응형

공통점

차이점

watch – 명시적 감시와 비교가 필요한 경우 사용

주요 특징

• 감시 대상(ref, reactive 속성, getter 등)을 명시적으로 지정

• 변경 전후 값(newVal, oldVal) 을 확인 가능

• 비동기 작업, debounce/throttle 처리에 적합

사용 예제 1: 기본 구조

import { ref, watch } from 'vue'

const count = ref(0)

watch(count, (newVal, oldVal) => {
  console.log(`count changed from ${oldVal} to ${newVal}`)
})

사용 예제 2: getter 사용

watch(
  () => user.value.name,
  (newName, oldName) => {
    console.log(`user name changed from ${oldName} to ${newName}`)
  }
)

사용 예제 3: 여러 개 감시

watch(
  [() => a.value, () => b.value],
  ([newA, newB], [oldA, oldB]) => {
    console.log('a or b changed')
  }
)

옵션 사용

watch(count, callback, {
  immediate: true,      // mount 시에도 실행
  deep: true,           // 객체/배열의 내부 변경 감지
})

watchEffect – 선언형 방식의 반응 처리

주요 특징

• 감시 대상을 명시하지 않음

• 함수 내부에서 사용한 모든 ref/ reactive가 자동 추적 대상이 됨

• 즉시 실행됨

• oldValue를 알 필요 없고, 단순한 반응형 사이드 이펙트를 다룰 때 적합

기본 예제

import { watchEffect, ref } from 'vue'

const count = ref(0)

watchEffect(() => {
  console.log(`The current count is ${count.value}`)
})

count.value가 바뀔 때마다 자동으로 실행

여러 종속성 추적

watchEffect(() => {
  console.log(`User: ${user.value.name}, Profile: ${profile.value.job}`)
})

user 또는 profile 내부 속성 중 하나라도 바뀌면 실행됨

실전 사용 기준 – 언제 어떤 걸 써야 하나?

⚠️ 주의: watchEffect는 모든 변경에 민감하다

watchEffect(() => {
  console.log(`Hello ${user.value.name}`)
})

복잡한 연산이나 비동기 처리에는 watch가 더 적절합니다.

Bonus: 비동기 작업 처리 시 onInvalidate

watch(query, async (newQuery, _, onInvalidate) => {
  let cancelled = false

  onInvalidate(() => {
    cancelled = true
  })

  const result = await fetchData(newQuery)
  if (!cancelled) {
    data.value = result
  }
})

이전 요청이 완료되기 전에 새로운 요청이 들어올 경우 이전 작업을 취소할 수 있음

정리