Watch

Vue.js의 Watch의 개념에 대해 살펴봅시다.

1. 코드 예시

먼저 아래와 같이 코드를 간단히 작성하였습니다. 이는 Hello?라고 출력된 화면에서 클릭을 하게 되면 chageMessage() 메소드가 실행되면서 Good!으로 글자가 변하게 되는 코드입니다.

<template>
  <h1 @click="changeMessage">
    {{ msg }}
  </h1>
  <h1>{{ reversedMessage }}</h1>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello?'
    }
  },
  computed: {
    reversedMessage() {
      return this.msg.split('').reverse().join('')
    }
  },
  methods: {
    changeMessage() {
      this.msg += 'Good!'
    }
  }
}
</script>

2. Watch

위 코드에서 watch라는 코드를 덧붙여 보도록 합시다 watch의 의미에서 유추할 수 있다시피 이는 데이터의 변화를 감시하는 옵션입니다.

그러므로 아래의 내용을 추가하게 되면, 어떠한 로직이 구현이 되는 것일까요? 먼저 changeMessage()라는 메소드를 통해서 msg라는 데이터를 할당 연산자로 변경을 했습니다. 그러면 watch라는 옵션을 통해서 우리가 지정한 msg라는 해당 데이터는 감시되고 있는 상태가 되는 것입니다.

그러한 감시가 되고 있는 상태에서 변화가 발생하게 되면, 해당하는 watch의 옵션의 로직이 출력이 되는 것입니다.

export default {
  watch: {
    msg() {
      console.log('msg:', this.msg)
    }
  }
}

watch 옵션은 데이터를 감시하는 것뿐만 아니라 아래의 예시처럼 computed 데이터에도 적용이 가능합니다.

watch: {
  msg(newValue) { // 매개변수
    console.log('msg:', newValue)
  },
  reversedMessage(newValue) {
    console.log('reversedMessage: ', newValue)
  }
}

여기서 가장 중요한 것은 watch라는 옵션을 통해서 특정한 데이터를 감시할 수 있다는 것입니다. 추가적으로 watch의 메소드의 첫 번째 매개변수로는 변경된 값을 사용할 수도 있습니다.

그러면 위와 같이 콘솔창에 출력되는 것을 볼 수 있습니다. 이렇게 watch를 이용하여 감시하고 있는 대상이 변화가 일어났을 때, 메소드를 실행할 수 있는 코드를 구현할 수 있습니다.