[Vue.js] Watch, WatchEffect

📌 1. Watch

composition API의 watch는 반응형 상태가 변경 될 때마다, 이를 감지하여 특정 작업을 수행하게 하는 "감시자 역할"을 한다.

watch(/* Source Type */, (newValue, oldValue) => {});

한 마디로, 반응형 상태가 변경 되었을 때 이를 감지하여 다른 작업(DOM변경, 비동기 작업 등등..)을 해야하는 상황에서 사용하는 속성이다.

간단한 예시를 살펴보자.

✨ 예제 1

<script setup>
const message = ref('Hello');

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

위의 예시에서 message의 값이 'Hello World!'로 변경된다면, 콘솔창에는 다음과 같이 출력될 것이다.

newValue : Hello World!
oldValue : Hello

---

watch의 첫 번째 매개변수는 다양한 타입(ref, reactive, computed, array등)이 될 수 있다.

✨ 예제 2

const x = ref(0);
const y = ref(0);

// ref
watch(x, (newX) => {
  console.log(newX);
})

// getter
watch(
  () => x.value + y.value,
  (sum) => {
    console.log(sum);
  }
)

// array
watch([x, () => y.value], ([newX, newY]) => {
  console.log(newX, newY);
})

---

여기서 주의할 점은 위와 같은 방식으로는 반응형 객체의 속성을 볼 수 없다는 것이다.

우리는 너무나 당연하게도 watch를 객체의 속성에도 사용하려고 시도해볼 것이다. (나도 그랬으므로...)

✨ 예제 3

const obj = reactive({ count: 0 });

watch(obj.count, (newValue) => {
	console.log('newValue: ', newValue);
});

watch가 제대로 작동하지 않는다.
왜 그럴까?

console.log(typeof obj.count);
// number 출력

obj.count의 타입은 반응형 객체가 아닌 'number'타입이다.
그러므로 watch가 동작하여 감지할 수 없다.

그러면 방법이 없을까?
대신 getter함수를 사용하면 된다.

const obj = reactive({ count: 0 });
watch(() => obj.count, (newValue) => {
  console.log('newValue: ', newValue);
});

---

또, 여기서 객체의 속성이 아닌 객체 그 자체를 첫번째 매개변수로 주면 어떻게 될까?

✨ 예제 4

<script setup>
const obj = reactive({ count: 0 });

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

newValue, oldValue 모두 같은 객체를 바라보므로, count가 1로 변경될 때 newValue, oldValue 모두 1을 출력한다.

---

📌 2. deep/immediate option

deep과 immediate는 watch 오브젝트의 옵션이다.
deep : 지정한 속성 안에 있으며, 지정한 속성의 속성 값도 감시한다.
immediate : watch의 처리를 페이지를 최초에 즉시 실행한다.

1. deep

deep은, 지정한 속성안에 있는 속성의 값도 감시하게 하는 watch의 옵션이다.

반응형 객체를 직접 watch() 하면 암시적으로 깊은 감시자가 생성된다. 즉, 속성 뿐만아니라 모든 중첩된 속성에도 트리거된다.

예시를 통해 살펴보자.

✨ 예제 5

const person = reactive({
  name: '홍길동',
  age: 30,
  hobby: '운동',
  obj: {
    count: 0,
  },
});

watch(person, (newValue) => {
  console.log('newValue: ', newValue);
});

person객체의 obj속성의 count가 변경되어도, 이를 감지하여 콘솔창에 출력된다.

---

다만, getter함수로 객체를 넘길 경우에는 객체의 값이 바뀔 경우에만 트리거 된다. 중첩된 속성은 트리거 되지 않는다.

위에서 우리는 객체의 속성을 첫번째 매개변수로 사용할때 watch가 동작하지 않아 getter함수를 사용했었다.

watch(
	() => person.obj,
	(newValue) => {
		// 객체의 값이 바뀔 경우에만 트리거 된다.
	}
);

이 경우, obj의 속성인 count가 변경되어도 watch가 동작하지 않는다. obj자체가 변경될 때만 동작한다.
ex) obj: "Hello!" 로 obj가 변경됐을 경우에만 동작.

deep 옵션을 사용하면 깊은 감시자로 강제할 수 있다.

✨ 예제 6

watch(
  () => person.obj,
  (newValue) => {
    console.log('newValue: ', newValue);
  },
  { deep: true } //마지막 매개변수
);

---

2. immediate

immediate는 최초에 즉시실행 하게 하는 옵션이다.

watch는 반응형 데이터를 감시하다가, 반응형 데이터의 변화를 감지했을 때 콜백 함수가 실행된다.
하지만, immeditate 옵션을 사용하면 최초에 페이지를 읽었을 때 즉시실행하게 만들 수 있다.

✨ 예제 7

const message = ref('Hello World!');
const reverseMessage = ref('');

watch(
  message,
  (newValue) => {
    reverseMessage.value = newValue.split('').reverse().join('');
  },
  {
    immediate: true,
  }
);

immditate 옵션을 주지 않았을 때는, message의 변경이 없었으므로 reverseMessage의 값도 여전히 ''이다.

message에 변경이 있어야만 reverseMessage에 '!dlroW olleH'가 담긴다.

하지만, immediate 옵션을 true로 주면 페이지가 최초 로드될때 즉시실행되어 바로 reverseMessage에 '!dlroW olleH'가 담긴다.

🚫 주의사항

deep 옵션은 큰 데이터 구조에서 사용할 때 비용이 많이 들 수 있다. 필요한 경우에만 사용하고 성능 영향에 주의해야한다.

---

3. computec VS watch

computed와 watch는 비슷한 역할을 수행한다.

//computed
 computed(() =>
  message.value.split('').reverse().join('')
 );

//watch
watch(
  message,
  (newValue) => {
    reverseMessage.value = newValue.split('').reverse().join('');
  }
);

• computed
  Vue 인스턴스의 상태(ref, reactive 변수)의 종속 관계를 자동으로 세팅하고자 할 때는 computed로 구현하는 것이 좋다.
  위 예시 처럼 reverseMessage는 message 값에 따라 결정되어지는 종속관계에 있다. 이 종속관계 코드가 복잡해지면 watch로 구현할 경우 더 복잡해지거나 중복계산 또는 오류를 발생시킬 수 있다.
  
  
• watch
  Vue 인트턴스의 상태(ref, reactive 변수)의 변경 시점에 특정 액션(call api, push route 등)을 취하고자 할때 적합하다.
  대게의 경우 computed로 구현 가능한 것이라면 watch가 아니라 computed로 구현하는게 대부분 옳다.

---

📌 3. watchEffect

WatchEffect는 콜백 함수 안의 반응성 데이터에 변화가 감지되면 자동으로 반응하여 실행한다.
그리고 WatchEffect의 코드는 컴포넌트가 생성될 때 즉시 실행된다.

예시를 살펴보자.

✨ 예제 8

const message = ref('');

watchEffect(()=> {
	console.log(message.value);
})

위의 예시의 경우, message 반응형 데이터가 변경될 때마다 콘솔이 출력된다.
콜백 함수 안의 반응형 데이터가 변경되면 자동으로 감지하여 실행되는 것이다.

이것은 언제 사용할까?
자동저장 기능을 만든다고 생각해보자.

save() 로 저장함수를 만들어 놓고, 이와 같이 watchEffect를 사용하는 것이다.

const message = ref('');

watchEffect(()=> {
	save(message.value);
})

위와 같이 코드를 작성하면, 내용이 수정될때마다 자동으로 저장함수 save()가 실행된다.

TIP! 바인딩된v-model에 .lazy 옵션을 준다면 포커스가 이동되었을때 저장하는 방식으로도 변경할 수 있을 것이다.

watch VS watchEffect

watch와 watchEffect 둘 다 관련 작업(api call, push route 등)을 반응적으로 수행할 수 있게 해준다. 하지만 주요한 차이점은 관련된 반응형 데이터를 추적하는 방식이다.

• watch
  명시적으로 관찰된 소스(첫번째 매개변수)만 추적한다. 콜백 내에서 액세스한 항목은 추적하지 않는다. 또한, 콜백은 소스가 실제로 변경된 경우에만 트리거된다. 콜백이 실행되어야 하는 시기를 보다 정확하게 제어할 수 있다.
• watchEffect
  콜백 내에 담긴 모든 반응 속성을 자동으로 추적한다. 이것은 더 편리하고 일반적으로 더 간결한 코드를 생성하지만 반응성 종속성을 덜 명시적으로 만든다.

---

참고문헌

인프런 vue3 기본편 - 짐코딩
https://ko.vuejs.org/api/options-state.html#watch

---

오늘의 한마디

객체나 배열을 주로 사용하는 실무에서 watch가 잘 동작하지 않는 경우가 많았다.
watch를 사용하는 것이 늘 불편했었는데 이렇게 포스팅하고 나니 제대로 정리 된 기분이다.

이 포스팅은 나를 위한 포스팅이다.. 앞으로도 자주 방문할 나를 위해 응원을 전한다! watch를 편리하게 잘 사용할 수 있기를!