computed와 watch

프로젝트를 진행하다가 computed속성과 watch속성을 사용하는 시기가 비슷하다는거를 느끼게 되었다. 그럼 computed와 watch의 차이는 무엇이고 각각은 언제 사용하는 것이 좋을까?

📖 computed 속성

vue.js에서 제공하는 반응형 시스템이다. 다른 반응형 상태를 기반으로 계산된 값을 생성하는데 사용된다.

📌 특징

• 캐싱: 종속성이 변경될 때만 재계산된다.
• 반응형: 종속된 반응형 데이터가 변경되면 자동으로 업데이트된다.
• 성능 최적화: 불필요한 재계산을 방지한다.

📌 사용 시기

• 다른 데이터를 기반으로 값을 계산해야 할 때
• 템플릿에서 복잡한 로직을 분리하고 싶을 때
• 여러 곳에서 재사용되는 계산이 필요할 때
• 계산비용이 높은 작업을 최적화하고 싶을 때

📌 예시

<template>
  <div>
    <input v-model="firstName" placeholder="First Name">
    <input v-model="lastName" placeholder="Last Name">
    <p>Full Name: {{ fullName }}</p>
    <p>Name Length: {{ nameLength }}</p>
  </div>
</template>

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

const firstName = ref('')
const lastName = ref('')

const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`.trim()
})

const nameLength = computed(() => {
  return fullName.value.length
})
</script>

• fullName은 firstName과 lastName을 결합한다.
• nameLength는 fullName의 길이를 계산한다.

📖 watch 속성

vue.js에서 반응형 데이터의 변화를 감지하고 그에 따른 사이드 이펙트를 수행하는 데 사용되는 옵션이다.

📌 주요특징

• 데이터 변화 감지: 특정 데이터의 변화를 감시한다.
• 비동기 작업 처리: API호출 등의 비동기 작업을 수행하는 데 적합하다.
• 복잡한 로직 처리: 데이터 변경에 따른 복잡한 로직을 실행할 수 있다.

📌 사용시기

• 데이터 변경에 따라 다른 데이터를 변경해야 할 때
• 데이터 변경 시 비동기 작업을 수행해야 할 때
• 데이터 변경 시 복잡한 계산이나 로직을 실행해야 할 때
• 여러 데이터 소스의 변경을 동시에 처리해야 할 때

📌 예시

<template>
  <div>
    <input v-model="searchQuery" placeholder="Search...">
    <p>Results: {{ searchResults.join(', ') }}</p>
  </div>
</template>

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

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

watch(searchQuery, async (newQuery, oldQuery) => {
  if (newQuery.trim()) {
    const results = await mockApiCall(newQuery)
    searchResults.value = results
  } else {
    searchResults.value = []
  }
})

const mockApiCall = async (query) => {
  await new Promise(resolve => setTimeout(resolve, 300))  // 300ms 지연
  return [`Result for ${query} 1`, `Result for ${query} 2`]
}
</script>

• searchQuery의 변화를 감시한다.
• 쿼리가 변경될 때마다 API호출을 수앻안다.
• API결과를 searchResults에 저장한다.

📖 computed와 watch의 차이

🔗 목적

• computed: 다른 데이터를 기반으로 새로운 데이터를 계산할 때
• watch: 데이터 변경을 감지하고 그에 따른 사이드 디펙트를 실행할 때

🔗 특징

• computed: 의존하는 데이터가 변경될 때만 재계산된다.
• watch: 지정된 데이터가 변경될 때마다 콜백함수를 실행한다.

🔗 반환값

• computed
  • 항상 값을 반환한다.
• watch
  • 값을 반환하지 않는다.
  • 주로 다른 데이터를 변경하거나 비동기 작업을 수행한다.

🔗 실행 시점

• computed
  • 의존성이 변경될 때만 재계산된다.
  • 결과가 캐시되며, 의존성이 변경되지 않으면 이전 계산 결과를 반환한다.
• watch
  • 감시 중인 데이터가 변경될 때마다 실행된다.

🔗 사용사례

• computed
  • 다른 속성을 기반으로 한 값 계산(예: 필터링된 목록, 합계 등)
  • 여러 데이터 소스를 조합하여 새로운 데이터 생성
• watch
  • 데이터 변경에 따른 비동기 작업 수행(예: API 호출)
  • 복잡한 데이터 변경 감지 및 반응
  • 다른 데이터 소스 업데이트
  • 조건에 따른 다른 작업 수행

🔗 성능

• computed
  • 캐싱 메커니즘으로 인해 일반적으로 더 효율적이다.
  • 의존성이 변경되지 않으면 재계산하지 않는다.
• watch
  • 데이터 변경 시마다 실행되므로, 불필요한 실행을 주의해야 한다.
  • 깊은 감시(deep watch)를 사용할 경우 성능에 영향을 줄 수 있다.

🔗 선택기준

• computed
  • 단순히 다른 데이터를 기반으로 값을 계산할 때
  • 더 선언적이고 효율적이므로 일반적으로 사용
• watch
  • 데이터 변경에 다른 사이드 이펙트나 비동기 작업이 필요할 때
  • 복잡한 로직이나 여러 단계의 작업이 필요할 때

실제 애플리케이션에서는 두 기능을 적절히 조합하여 사용하는 것이 일반적이다. 예를 들어, computed 속성으로 계산된 값의 변화를 watch로 감시하여 추가 작업을 수행할 수 있다.

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

const items = ref([1, 2, 3, 4, 5])
const evenItems = computed(() => items.value.filter(item => item % 2 === 0))

watch(evenItems, (newEvenItems) => {
  console.log('Even items changed:', newEvenItems)
})

// items를 변경하면 evenItems가 자동으로 재계산되고, 그 결과 watch 함수가 트리거된다.
setTimeout(() => {
  items.value.push(6)
}, 2000)
</script>

다음 예시에서는 computed를 사용하여 짝수 항목을 계산하고, watch를 사용하여 짝수 항목의 변경을 감지하고 있다. 이런식으로 두 기능을 조합하면 효율적이고 유연한 반응형 로직을 구현할 수 있다.