[Vue공부] 4. watch를 이용한 데이터 상태 감시

https://augustines.tistory.com/212

[Vue공부] 3. vue 기초문법

 

앞서 Vue에 대해 알아야 할 개념들 중, watch에 대해서 간략하게 소개했다. 그런데, 이 watch라는게 front 코딩을 하면 할수록 많이 활용될 수 있을 것 같아서, 이 번 포스팅에서는 watch를 통한 vue 데이터 상태의 능동적인 감시를 통한 처리의 자동화에 대해 알아보고자 한다.

watch의 기본 사용법은 다음과 같다.

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

watch 속성에는 다음과 같은 option 을 부여할 수 있다.

• deep : 네트스된 객체도 감시할지 여부. data  형식은 boolean
• immediate : 처음 값을 읽어 들이는 시점에도 호출할지 여부. data 형식은 boolean

옵션을 사용할 경우, handler 예약어를 사용한다. 다음과 같이.

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

deep 속성은 감시 대상 데이터가 하위 속성을 가지고 있는 객체인 경우, 그 하위 속성의 변경까지 감시한다. immediate 속성은 컴포넌트가 호출되었을 때, 그 컴포넌트의 watch 대상 데이터를 바로 읽을지 여부를 결정하는 것이다. false 이면 대상 데이터가 변경이 일어났을 때, watch에서 지정한 로직이 수행된다.

App.vue에 아래 WatchTest.vue 파일을 만든 후, WatchTest 컴포넌트를 추가하자.

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

<script>
export default {
  data() {
    return {
      food1: 'pizza',
      food2: 'sphagetti',
    }
  },
  watch: {
    food1: {
      handler: function (newVal, oldVal) {
        console.log(newVal, oldVal)
      },
      deep: true,
      immediate: true,
    },
    food2(val) {
      console.log('food2', val)
    },
  },
}
</script>

감시 대상 데이터인 food1과 food 2를 살펴보면, food1의 경우엔 immediate가 true로 설정되어 있다. food1은 이 컴포넌트를 읽어 들이는 시점에 console.log가 실행된다. food2는 handler가 없기에, food2의 console.log는 실행되지 않는다. watch의 immediate 옵션은 디폴트로 false로 지정되어 있기 때문이다.

이 외 watch 에 대한 활용이 더 있지만.. 여기까지 하고 필요할 때마다 watch에 대한 활용 내용을 더 업데이트하는 것으로 이 포스팅을 마무리한다.