[Vue.js] computed와 watch 그리고 watchEffect

[computed]

템플릿 안에 연산이 길어지거나 논리가 복잡해지면 유지보수하기 힘들다는 단점이 있습니다. 이런 경우 해당 연산이나 논리를  computed 안에 집어넣어 템플릿을 간결하게 할 수 있는데요.

하지만 우리는 method도 똑같은 역할을 한다는 것을 이미 알고 있습니다.

 

method의 경우

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

const info = reactive({
  name: 'silverCastle',
  age: 26,
})

const checkAge = () => {
  return info.age >= 20 && info.age < 30 ? 'Yes' : 'No'
}

</script>

<template>
  <p>20대인가요?</p>
  <span>{{ checkAge() }}</span>
</template>

computed의 경우

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

const info = reactive({
  name: 'silverCastle',
  age: 26,
})

const checkAge = computed(() => {
  return info.age >= 20 && info.age < 30 ? 'Yes' : 'No'
})

</script>

<template>
  <p>20대인가요?</p>
  <span>{{ checkAge }}</span>
</template>

굳이 method도 같은 역할을 하는데.. computed를 사용해야 할까요?

 

바로 computed는 데이터가 바뀔 때만 실행되는 cache의 성질이 있기 때문입니다.

computed를 사용하면 info.age의 값이 바뀌지 않는 한 아무리 여러 번 접근하더라도, 이전에 계산한 결과 값을 리턴합니다.

캐싱의 여부는 성능적으로 영향을 끼칠 수 있습니다. 만약 cost가 큰 연산을 하는 속성이 있고 해당 속성을 의존하는 다른 computed의 속성이 있을 경우, 불필요한 비용이 발생할 것이기 때문이죠..!

 

그렇다고 해서 computed를 무분별하게 사용하는 것은 권장하지 않습니다.

computed는 getter의 느낌이 강하기 때문에 비동기 처리를 하거나 DOM을 변경하는 것은 적절하지 않습니다. 이럴 때는 무엇을 사용하면 될까요?

[watch]

말 그대로 어떤 변화를 감시하는 watch를 사용하면 됩니다.

watch는 반응형 콜백에 가깝기 때문에 비동기 처리, DOM 변경, 다른 함수 호출 등에 적합합니다.

또한, 변화를 감시하므로 newValue, oldValue를 알 수 있습니다.

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

const message = ref('')

watch(message, (newValue, oldValue) => {
  console.log('newValue: ', newValue);
  console.log('oldValue: ', oldValue);
})
</script>

<template>
  <input v-model="message">
 <p>{{ message }}</p>
</template>

기본적으로 lazy한 watch는 값이 변경되지 않는 한 실행을 하지 않는데 immediate: true 옵션을 추가하면 즉시 실행할 수 있어요.

watch(source, (newValue, oldValue) => {
  // 즉시 실행된 다음 `source`가 변경되면 다시 실행됩니다.
}, { immediate: true })

콜백을 즉시 실행하고 싶은데 계속 옵션을 추가하기엔 귀찮고.. 명시적으로 감시할 데이터를 지정해야 하고... 이를 해결하는 게 watchEffect입니다!

[watchEffect]

watchEffect는 감시하는 데이터가 변경되지 않더라도 처음에 실행될 뿐만 아니라 명시하지 않아도 동기적으로 실행되는 모든 반응형 속성을 자동으로 추적합니다.

const url = ref('https://...')
const data = ref(null)

watchEffect(async () => {
  const response = await fetch(url.value)
  data.value = await response.json()
})

url.value에 대해 감지해라!라고 명시를 하지 않았지만 url.value가 변경될 때마다 감지를 한다는 말이죠..!

[마무리]

정리하자면 computed, watch, watchEffect는 다음과 같은 경우에 사용할 수 있어요 😎

computed - 계산해야 할 목표 데이터를 정의하는 방식으로 '선언형 프로그래밍' 방식입니다. 복잡한 연산을 캐싱 처리하기 위한 경우에 적합합니다.

watch - 감시할 데이터를 지정하고 그 데이터가 바뀌면 어떤 함수를 실행하는 방식으로 '명령형 프로그래밍' 방식입니다. 명시적으로 감시하는 데이터만 추적하는 경우에 적합합니다. 

watchEffect - 데이터의 변화 없이 처음에 실행하고 동기(sync)적으로 실행되는 모든 반응형 데이터를 자동으로 감시하고 싶은 경우에 적합합니다.