[Vue] watch에 대해 알아보자

나도 선배 개발자분들처럼 watch로 디버그 하고싶어서 쓰는 글

 

1. watch란 무엇인가

Vue3 Composition API에서 반응형 데이터를 감시하고, 변화가 생길 경우 특정 로직(=콜백함수)를 실행한다.

주로 반응형 데이터(ref, reactive)의 변화를 감지하여 사용자가 원하는 작업을 사용하도록 할 수 있다.

1. 데이터 변화를 감지 - 특정 작업 트리거
2. 비동기 로직 수행(ex. API호출)
3. 디버깅에 유용(내가 제일 배우고 싶은 이유!!!!!!1!)
4. 불필요한 렌더링 방지 등

2. watch의 구조

watch(source, callback, options?)

• source : 감시 대상. 감시할 ref나 reactive, getter함수, 배열로 전달 가능하다.
• callback : 감지된 변화가 발생했을 때 실행할 함수. 즉 콜백함수이다. 두 개의 매개변수(새 값 newValue, 이전 값 oldValue)를 가진다.
• options : 추가 설정을 위한 객체. 주로 immediate와 deep를 많이 사용하더라.
  • immediate :  감시자가 생성되는 즉시 콜백 호출. 최초 호출 시 이전 값은 undefined
  • deep : 전달값 소스(=source)가 객체인 경우, 깊은 변경사항에도 콜백이 실행되도록 한다. 객체 내부까지 깊은 감시 수행
  • flush : 콜백의 발생 타이밍을 조정한다(watchEffect)
  • onTrack / onTrigger : 감시자의 의존성을 디버그한다.
  • once : 콜백을 한번만 실행한다. 첫번째 콜백 함수가 실행된 후 자동으로 중지할 수 있다.

3. watch의 사용법⭐⭐

사실상 오늘 포스팅에서 제일 중요한 부분이다.

 

기본 사용

•  ref감시

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldVal} to ${newVal}`);
});

• getter(reactive) 감시

const state = reactive({ count:0 });
watch(()=>state.count, (newValue, oldValue)=>{
  // newValue에는 증가된 count값, oldValue에는 기존의 count값이 출력될 것이다. 
});

• immediate 실행

const keyword = ref('');

watch(keyword, (newValue) => {
  console.log('찾는 값 : ', newValue);
}, { immediate : true });

watch설정 직후, 페이지 로딩 시 한번은 무조건 실행 된다. 따로 내가 newValue를 작성하지 않아도!

• deep 실행

const ninja = reactive({
  name : 'Naruto',
  age : 15,
  favouriteFood : 'Ramen',
});

// reactive와 같은 객체데이터이므로 source도 함수꼴이어야 한다.
watch(
  () => ninja,
  (newValue, oldValue) => {
    // 객체가 사스케로 바뀐다면 newValue에는 사스케가, oldValue에는 나루토가 들어갈 것이다.
  }, {deep:true}
);

여기선 ninja 객체의 name, age, favouriteFood 전부 다 감지한다.

 

4. watch와 computed의 차이점?

둘 다 Vue에서 상태 변화에 대해 처리하는 것에 사용되지만, 동작 방식에서 다소 차이가 있다.

watch

• 데이터 변화를 감지해 부수적인 작업(=api 호출, 디버깅)을 시행함
• 지정한 콜백함수 실행
• 비동기 작업에 적합함(setTimeout과 같은것)

// count가 변경되면 alert 실행

const count = ref(0);

watch(count, (newValue)=>{
  alert(newValue, '회 눌러짐');
});

computed

• 새로운 값 계산, 캐싱된 데이터를 제공
• 데이터 변화 시 새로운 값 계산 후 캐싱
• 비동기 작업 지원 안함

const givenName = ref('Naruto');
const familyName = ref('Uzumaki');

// givenName과 familyName에 따라 달라진다. 
const fullName = computed(()=>{ 
  `${familyName.value} ${givenName.value}` // Uzumaki Naruto 출력됨
});

giveName.value = 'Sasuke';
familyName.value = 'Uchiha';

console.log(`${familyName.value} ${givenName.value}` ); // Uchiha Sasuke 출력됨

 

5. watch vs watchEffect

watch는 source가 반드시 명시적으로 필요하며, newValue와 oldValue를 인자로 받는다.

그렇지만 그 모든 것을 한방에 필요 없게끔 만들어버리는 친구가 바로 watchEffect....

watchEffect는 watch와 기능은 비슷하지만

① source가 필요 없다. 그러므로 그냥 내부에서 사용된 모든 반응형 데이터가 종속된다.

② 콜백 함수에 인자가 제공되지 않고, 내부에서 상태를 직접 확인한다.

const count = ref(0);

watchEffect(()=>{
  console.log('누른 횟수 :' , count.value);
});

// ref가 여기선 count밖에 없지만
// name이나 age 등의 ref가 여러개 생길 때에도 watchEffect함수 내에 작성해서 그냥 사용 가능하다.

대부분의 상황에서 그냥 watch를 사용하고, 간단한게 반응형 데이터를 추적하거나 감시 대상 지정 없이 상태 변화에 반응하려 할 때 사용할 수 있다.

watchEffect로 귀찮게 source 설정 없이 디버깅 가능할지도....?

 

+ 추가 궁금증

watch에서 source자리에 일반변수를 쓸 때와  () => {}의 차이는 무엇일까?

1. 일반 변수를 source에서 사용하는 경우

• 일반 변수는 ref혹은 reactive로 추출한 특정 변수가 올 수 있다.
• Vue는 이 변수를 반응형으로 추적하고, 값이 바뀔 때 마다 콜백(callback)이 실행된다.
• 간단한 "단일 변수"를 감시할 때 사용한다.

2. () => {}를 source에서 사용하는 경우

• 함수 내부에서 참조된 반응형 값들을(()=>{}안에 설정된 값들)을 자동으로 추적한다.
• 이 변수들을 감지해서 콜백(callback)을 실행하는 것은 같다.
• 특정 조건이다 계산된 값, 여러 반응형 변수의 조합을 감시한다. 따라서 단일변수 뿐 만 아니라 복잡한 계산식(computed)나 조건도 추적할 수 있다.
• 복잡한 조건, 계산식(computed)가 있을 경우에 사용된다.

 

[출처]

https://ko.vuejs.org/api/reactivity-core.html#watch