[Vue.js] watch 속성

사용자가 만든 감시자 = watch 속성!

• Vue에서 watch 속성을 사용하여 데이터 변경을 감지하고 반응 할 수 있으며,
  데이터 변경 결과에 따라 추가 반응 및 데이터 조작도 가능하다.
• API 엑세스(비동기 연산)을 수행하고 최종응답을 얻을 때 까지 중간 상태를 설정 할 수도 있다.
• 비동기식 이거나 시간이 많이 소요되는 작업을 수행하려고 하는 경우 watch를 유용하게 사용할 수 있다.

watch 속성의 기본 사용법

watch: {
       <감시 대상 데이터>: function(<새로운값>, <이전 값>){
            // 감시 대상 데이터가 변했을 때, 처리 로직       
} }

💡 watch가 변경값(=새로운 값, 이전값)을 가지지 않는 경우 아래와 같은 형태로 사용한다.

watch: {
       <감시 대상 데이터> : function(){
            // 감시 대상 데이터가 변했을 때, 처리 로직       
} }

watch 속성의 option

1. immediate

• immediate : true
  : 컴포넌트가 생성되자마자 즉시 실행된다.

  페이지를 처음 로드할 때 데이터 값의 변화가 없으므로 watch가 실행되지 않는다
  하지만 watch를 사용해야만 데이터를 가져올 수 있는 경우,
  페이지를 처음 로드시 watch가 작동하지 않기 때문에 데이터를 가져오지 못한다
  상황에 따라 데이터 값이 변하지 않아도 watch를 실행해야하는 경우가 있는데
  💡 이때 필요한 옵션이 immediate이며,
  페이지 로드시 바로 watch가 실행되도록 해주는 옵션이다.
  값은 true로 설정해준다.

2. deep

• deep : true
  : data가 object(=배열 또는 객체)인 경우 object 내부의 값이 변경될때 watch가 감지 가능할 수 있도록 한다.

  
  Vue는 위와 같은 이유로 object 내부 값의 변화를 감지할 수 없다.
  💡 이때 deep 옵션을 사용하여 값을 true로 설정해 주면 object의 내부의 변화까지 감지가 가능하다.

3. handler

• handler
  : watch가 속성이 변경됨을 감지할 때 호출될 함수를 지정해준다.

watch: {
  movie: {
    handler(movie) {
      // Fetch data about the movie
      fetch(`/${movie}`).then((data) => {
        this.movieData = data;
      });
    }
  }
}

단축하여 아래처럼 함수를 직접 지정할 수도 있다

watch: {
  movie(movie) {
    // Fetch data about the movie
    fetch(`/${movie}`).then((data) => {
      this.movieData = data;
    });
  }
}

---

watch 속성 예제

• 하나의 변수를 감지하는 경우

<template>
    <div>
        <input type="text" v-model="message" />
     </div>
</template>

export default {
    watch:{ message :function(value){
        console.log("value=>", value)
    } },
}

👉실행결과

• 특정 변수 및 변수 내부 값 변화 감지

<template>
    <div>
        <input type="text" v-model="id" />
        <input type="text" v-model="name" />
     </div>
</template>

import { watch } from '@vue/runtime-core';
export default {
setup () {
        const state = reactive({
            id : 'aaa',
            name : 'bbb',
        });

        // 배열의 변수 변경 감지
        watch(state, () => {
            console.log('state변수 변경 =>', state)
        });

        // 배열 내부값 변경 감지 (특정변수, 변수 하위에 있는 변수값 감지)
        watch(() => state.name, () => {
            console.log('state.name변수 변경 =>', state.name)
        },{
            immediate : true,
            deep : true
        });        
        return { state, ...toRefs(state) }
    }
}

👉실행결과

state 변수에 id, name 중 하나라도 변화가 감지되면
➡️ console.log('state변수 변경 =>', state)가 실행된다
state.name만 변화 하면 state.name의 변화를 감지하는
➡️ console.log('state.name변수 변경 =>', state.name)만 실행된다.

---

watch 와 computed

watch 속성은 computed속성과 비슷한 방식으로 작동한다.
하지만 watch는 부수효과 처리를 위하여 사용된다.
컴포넌트의 상태를 변경하고 싶을때는 computed를 사용하는 것이 좋다

부수 효과는 컴포넌트 외부의 동작이나 비동기 처리를 말한다.

• 데이터를 가져오는 것 (Fetching data)
• DOM 조작하기
• 로컬 저장소 또는 오디오 재생과 같은 브라우저 API 사용
  이러한 변화들은 직접 컴포넌트에 영향을 주지 않으므로 부수 효과로 간주한다.

부수 효과에 대한 작업이 아니라면 computed을 사용하는 것이 좋다.
computed는 다른 변화에 대한 응답으로 계산을 업데이트해야 하는 상황에서 대부분 사용되며, 선언형 프로그래밍인 computed가 명령형 프로그래밍인 watch 보다 코드 반복이 적고 간결하여 많이 사용된다.

---

🌎 참고
https://augustines.tistory.com/213
https://pygmalion0220.tistory.com/entry/Vue-Watch
https://ui.toast.com/weekly-pick/ko_20190307