Vue3 ) watch 와 watchEffect

watch??

• watch 는 개발자가 코드로 지정한 변수값의 변화를 감시하여 콜백함수로 하여금 부가적인 작업을 할 수 있도록 해줍니다.
• watch 는 지정된 특정한 변수의 감시와 더불어 값이 변경되기 이전 값을 참조할 수 있다는 장점이 있습니다.
• 컴포넌트가 생성되어 변수가 할당되기 전에 모든 변수는 null 값을 가지고 있습니다.
  이 후 변수의 초기값이 들어가게 되는데, watch는 기본적으로 이러한 null값에서 초기값으로 넘어가는 과정을 데이터의 변경으로 판단하지 않습니다.
  일반적으로 이 값을 바라볼 일은 없지만 같은 컴포넌트를 다시 불러올 때 props 의 처음 값이 매우 중요할 때가 있습니다.
  이런 경우에는 immediate 옵션을 true로 설정해주면 처음 값도 볼 수 있습니다.

아래의 예시코드를 통해 watch 속성을 살펴보겠습니다.

<template>
<div>
  <p>{{count_o}}</p>
  <button @click="count_o++">Options API Count 증가</button>
  <p>{{count_c_1}}</p>
  <button @click="count_c_1++">Composition API 1st Count 증가</button>
  <p>{{count_c_2}}</p>
  <button @click="count_c_2++">Composition API 2st Count 증가</button>
  <p>상태 : {{state}}</p>
  <button @click="onStop()">watchEffect 중지</button>
  </div>
</template>

<script>
import { ref, watch, watchEffect } from 'vue'
export default {
  //Option API
  data(){
    return {
      count_o: 0,
    }
  },
  watch: {
    count_o: (cur,prev) => {
      console.log('Options API Watch : '+ prev + ' ==> ' + cur)
    },
  },

  // Composition API
  setup() {
    const count_c_1 = ref(0)
    const count_c_2 = ref(0)
    const state = ref('실행 중')

    watch(
      count_c_1,
      (cur, prev) => {
        console.log('Composition API Watch : '+ prev + ' ==> ' + cur)
      },
      {
        immediate: true,
      }
    )

    watch([count_c_1, count_c_2], (cur, prev) => {
      console.log('Composition API Multiple Watch : ' + prev + ' ==> ' + cur)
    })

    const stop = watchEffect(
      () => {
        console.log('Composition API watchEffect Called ' + count_c_2.value)
      },
      {
        flush: 'post',
      }
    )

    const onStop = () => {
      state.value = '중지'
      stop()
    }

    return {
      count_c_1,
      count_c_2,
      state,
      onStop,
    }

  },
}
</script>

• count_c_1 은 immediate 속성을 true 로 해서 감시하고 있고, Options API의 count_o 는 immediate 속성이 따로 설정되어 있지 않습니다. 실제로 코드를 실행하고 콘솔창을 확인하면 다음과 같은 결과를 확인할 수 있습니다.

• immediate 가 활성화되지 않은 Options API 의 watch 는 아무런 로그를 찍지 않았지만, immediate 가 활성화된 Composition API 의 watch 는 undefined 에서 0 으로 초기 할당값의 변화도 감지했음을 확인할 수 있습니다.
• watchEffect 도 출력을 했는데, watchEffect 는 기본적으로 초기 대입값부터 모두 감시하기 때문입니다. 실행화면에서 각 버튼을 눌러 콘솔창을 확인해보면 watch 가 잘 작동하는 것을 알 수 있습니다.
• 만약 감시하고자 하는 대상이 객체나 리스트라면 deep 옵션을 true 로 설정하는 것이 좋습니다.
  이는 객체나 배열의 변수가 참조하고 있는 메모리가 다시 중첩된 객체나 리스트의 요소의 메모리를 가리키고 있기 때문입니다. 즉, 값이 변경되어도 메모리가 변경되는 것이 아니기 때문에, 일반적으로 watch 데이터의 변경을 알 수 없습니다. 강제로 객체나 리스트의 내용까지 감시하기 위해서는 deep 옵션을 이용해야 합니다.

watchEffect 는 뭐죠?

watchEffect 는 Vue 3 에서 새롭게 등장한 기능으로 강력한 감시능력을 제공합니다. watch 는 계산된 속성을 사용하고 있다면 사실 별로 할 일이 없었습니다. 실제로 Vue2 까지의 가이드북을 보면, watch 보다는 computed를 사용할 것을 권장했습니다.

---

watch 와 computed 의 차이점을 알고 싶다면 이 글을 읽어주세요.

Vue) computed VS watch

---

하지만 Vue 3 에서는 watch 의 개선 및 watchEffect 라는 신규 API 로 인해 사용성이 폭넓어지게 되었습니다.

• watchEffect 는 초기 변경값부터 감시를 시작합니다.
• 기본적으로 watchEffect 는 어떤 값이 변경되었는지 알려주지 않습니다.
  당연히 어떤 값이 변경되었는지 모르므로 과거값도 알 수 없습니다. watchEffect 는 불필요한 변수를 모두 감시하지 않기 위해 모든 변수의 대입값을 감시한 후에는 콜백함수에서 참조되는 변수만 감시합니다.

다시 위의 코드로 돌아가면

watchEffect는 자동으로 count_c_2의 value 값을 콘솔에 출력했습니다. watchEffect 는 자동으로 count_c_2 가 앞으로도 감시해야 할 대상임을 알고 있습니다. 하지만 콜백함수가 count_c_1은 참조하고 있지 않다고 판단하여 count_c_1 은 감시하지 않고 있습니다.

애플리케이션의 두 번째 버튼인 "Composition API 1st Count 증가" 를 눌러보면 watchEffect 의 콜백함수가 호출되지 않지만, "Composition API 2nd Count 증가" 버튼을 누르면 watchEffect 의 콜백함수가 정상적으로 출력되는 것을 확인할 수 있습니다.

watchEffect 는 생성 시 반환함수를 받아 감시의 중단을 위해 활용할 수 있습니다.
위 코드에서 watchEffect 는 stop 이라는 함수를 반환하고 중지 버튼을 누르면 stop 함수를 불러 watchEffect 의 감시를 중단시킵니다. 중단 이후 count_c_2 를 수백번을 눌러도 watchEffect 는 더 이상 호출되지 않습니다.

watchEffect 는 flush 라는 옵션이 존재합니다. 사용하지 않으면 'pre' 가 flush 의 기본값이며 'pre' 와 'post' 중 하나를 선택할 수 있습니다.
pre 는 DOM 이 업데이트하기 전에 콜백함수를 호출하라는 뜻이고, post 는 DOM 이 업데이트된 후 콜백함수를 호출해달라는 뜻입니다.

---

참고도서 : 웹 애플리케이션 개발 기초부터 실전까지 한 권으로 배우는 Vue.js 3