Watch 와 WatchEffect에 관해서

Posted Apr 6, 2025 Updated Apr 6, 2025

18 min read

Vue에서 watch와 watchEffect는 반응형 데이터 변화를 감지하고 처리하는 두 가지 중요한 기능입니다.

watch

특정 반응형 데이터(ref, reactive, computed 등)의 변화를 감시합니다.
명시적으로 감시할 대상을 지정해야 합니다.
이전 값과 현재 값에 모두 접근할 수 있습니다.
옵션을 통해 동작을 세밀하게 제어할 수 있습니다(immediate, deep 등).

  
import { ref, watch } from 'vue'

const count = ref(0)

watch(count, (newValue, oldValue) => {
  console.log(`카운트가 ${oldValue}에서 ${newValue}로 변경되었습니다.`)
}, { immediate: true, deep: true })

watchEffect

Vue 3에서 새롭게 도입된 기능입니다.
함수 내부에서 사용된 모든 반응형 데이터를 자동으로 추적합니다.
명시적으로 감시할 속성을 지정할 필요가 없습니다.
이전 값에 접근할 수 없고, 현재 값만 사용할 수 있습니다.
컴포넌트 마운트 시 즉시 실행됩니다.

  
import { ref, watchEffect } from 'vue'

const count = ref(0)
const name = ref('홍길동')

watchEffect(() => {
  console.log(`카운트: ${count.value}, 이름: ${name.value}`)
})

Vue 3에서도 계속 사용되는 이유

각각의 유스케이스 존재:
- watch: 특정 데이터 변화에만 반응하고 이전 값과 비교가 필요할 때
- watchEffect: 여러 반응형 데이터를 한번에 추적하고 간결하게 사용하고 싶을 때
세밀한 제어 필요성:
- watch는 deep 옵션, immediate 옵션 등을 통해 더 세밀한 제어가 가능합니다.
- 복잡한 객체의 중첩된 속성 변화를 감지하는 경우 watch + deep 옵션이 유용합니다.
이전 값 접근 필요성:
- 데이터 변화의 이전 값과 현재 값을 비교하는 로직이 필요한 경우 watch가 필수적입니다.
호환성과 마이그레이션 용이성:
- Vue 2에서 Vue 3로 마이그레이션하는 프로젝트들을 위해 익숙한 API를 유지했습니다.
발동 타이밍 제어:
- watch는 flush 옵션을 통해 DOM 업데이트 전후에 콜백이 실행되는 시점을 제어할 수 있습니다.

Vue 3에서는 Composition API와 함께 이러한 기능들이 더욱 유연하게 사용될 수 있어, 두 함수 모두 각자의 장점과 사용 시나리오에 맞게 계속 활용되고 있습니다.

네, 정확한 지적입니다. Vue에서 ref, reactive, computed 등의 반응형 API는 기본적으로 값의 변화를 감지하고 이에 따라 UI를 자동으로 업데이트하기 위한 것입니다. Swift의 @State와 개념적으로 유사합니다.

Vue의 반응형 시스템은 크게 두 가지 측면으로 작동합니다:

반응형 데이터 정의 (ref, reactive, computed):
- 데이터의 변화를 Vue가 추적할 수 있게 만듭니다.
- 이 데이터가 변경되면 해당 데이터를 사용하는 템플릿이나 계산된 속성이 자동으로 업데이트됩니다.
- Swift의 @State처럼 상태 변경 시 UI 업데이트를 자동화합니다.
반응형 효과 정의 (watch, watchEffect):
- 데이터 변화에 대응하여 추가적인 사이드 이펙트를 실행하기 위한 도구입니다.
- 데이터 변화 시 API 호출, 로컬 스토리지 업데이트 등의 작업을 수행합니다.

예를 들어:

  
// 반응형 데이터 정의
const count = ref(0)

// 템플릿에서 자동으로 업데이트됨
// <div>9</div>

// 버튼 클릭 시 count 증가
function increment() {
  count.value++
  // 여기서 별도의 DOM 업데이트 코드가 필요 없음
  // Vue가 자동으로 count를 사용하는 모든 부분을 업데이트
}

따라서:

ref, reactive, computed는 기본 반응형 데이터를 정의합니다 (Swift의 @State와 유사)
watch와 watchEffect는 반응형 데이터 변화에 따른 추가적인 로직을 실행하기 위한 도구입니다 (Swift의 .onChange 수정자와 유사)

반응형 데이터만으로도 UI는 자동 업데이트되지만, 데이터 변화에 따른 복잡한 로직, 비동기 작업, 다른 상태 업데이트 등이 필요할 때 watch와 watchEffect가 필요해집니다.

Vue의 반응형 시스템 설명하기

Vue의 반응형 시스템을 이해하기 위한 실용적인 예시를 들어보겠습니다.

예시 1: 쇼핑 카트 애플리케이션

반응형 데이터 (ref, reactive, computed)

  
import { ref, computed } from 'vue'

// 반응형 데이터 정의
const cartItems = ref([
  { id: 1, name: '노트북', price: 1200000, quantity: 1 },
  { id: 2, name: '헤드폰', price: 300000, quantity: 1 }
])

// 계산된 속성
const totalPrice = computed(() => {
  return cartItems.value.reduce((sum, item) => sum + (item.price * item.quantity), 0)
})

// 아이템 수량 변경 함수
function updateQuantity(itemId, newQuantity) {
  const item = cartItems.value.find(item => item.id === itemId)
  if (item) {
    item.quantity = newQuantity
    // 👉 여기서 특별한 업데이트 코드가 없어도 UI는 자동으로 업데이트됨!
  }
}

템플릿:

  
<div>
  <div v-for="item in cartItems" :key="item.id">
     - 원 x 
    <input type="number" v-model="item.quantity" min="1">
  </div>
  <div>총 금액: 원</div>
</div>

여기서 cartItems를 변경하면 Vue가 자동으로 UI를 업데이트합니다. 수량을 변경하면 totalPrice도 자동으로 재계산됩니다. 이것이 바로 Swift의 @State와 유사한 개념입니다.

예시 2: 검색 기능 구현

이제 watch와 watchEffect가 필요한 상황을 봅시다.

  
import { ref, watch } from 'vue'

const searchQuery = ref('')
const searchResults = ref([])
const isLoading = ref(false)

// 검색어 변경 시 API 호출하기
watch(searchQuery, async (newQuery, oldQuery) => {
  if (newQuery.trim() === '') {
    searchResults.value = []
    return
  }
  
  // 타이핑 중간에 매번 API를 호출하는 것 방지
  if (newQuery.length < 3) return
  
  try {
    isLoading.value = true
    // API 호출
    const response = await fetch(`/api/search?q=${newQuery}`)
    searchResults.value = await response.json()
  } catch (error) {
    console.error('검색 오류:', error)
  } finally {
    isLoading.value = false
  }
}, { debounce: 300 }) // 300ms 디바운스

여기서 watch는:

사용자가 입력을 멈춘 후 300ms 기다림
검색어가 3글자 이상인지 확인
API를 호출하여 결과를 가져옴

UI는 searchResults와 isLoading이 변경될 때 자동으로 업데이트됩니다.

예시 3: 양식 저장 (watchEffect 사용)

  
import { ref, reactive, watchEffect } from 'vue'

// 양식 데이터
const form = reactive({
  name: '',
  email: '',
  message: ''
})

// 로컬 스토리지에 자동 저장
watchEffect(() => {
  // form 객체의 어떤 속성이 변경되든 이 함수가 실행됨
  localStorage.setItem('contactForm', JSON.stringify(form))
  console.log('양식이 자동 저장되었습니다.')
})

// 초기화 함수
function loadSavedForm() {
  const saved = localStorage.getItem('contactForm')
  if (saved) {
    const data = JSON.parse(saved)
    Object.assign(form, data)
  }
}

watchEffect는 form 객체의 어떤 속성이 변경되든 자동으로 감지하고 로컬 스토리지에 저장합니다.

정리

반응형 데이터 (ref, reactive, computed)

UI와 연결된 데이터를 관리
Swift의 @State처럼 데이터가 변경되면 UI가 자동으로 업데이트됨
데이터 <-> UI 간의 자동 동기화