Vue.js - Watch

Vue.js의 Watch 옵션: 데이터 감시의 핵심

Vue.js는 데이터의 변경을 감지하고 이에 대응하는 여러 가지 방법을 제공합니다. 그 중 하나가 Watch 옵션입니다. Watch는 데이터의 변화를 감시하고 특정 동작을 수행하는데 사용됩니다. 이것은 데이터의 변화에 대응하여 비동기적 또는 계산적인 동작을 수행하는 데 매우 유용합니다.

Watch 옵션의 기본 구조

Vue 인스턴스의 옵션 객체 내부에 "watch" 속성을 추가하여 데이터를 감시합니다. 간단한 구조는 다음과 같습니다.

new Vue({
  data: {
    message: 'Hello, Vue!'
  },
  watch: {
    // 감시할 데이터 속성
    message: function(newMessage, oldMessage) {
      // 데이터가 변경될 때 수행할 동작
      console.log(`메시지가 변경되었습니다: ${oldMessage} -> ${newMessage}`);
    }
  }
});

위의 예제에서 message라는 데이터 속성이 변할 때마다 Watch가 실행되고 새로운 값과 이전 값을 인자로 받아 로그를 출력합니다.

Watch의 활용

1. 비동기 작업 처리
Watch는 비동기적인 API 호출 또는 서버 통신과 같은 비동기 작업을 처리하는데 사용될 수 있습니다. 데이터가 변경될 때마다 API를 호출하고 그에 대한 응답을 처리할 수 있습니다.

watch: {
  data: function(newData) {
    this.loadDataFromAPI(newData);
  }
}

2. 계산된 속성 업데이트
데이터의 변화에 따라 계산된 속성(computed properties)을 업데이트할 수 있습니다. 예를 들어, 두 데이터 속성의 합을 계산하는 경우

data: {
  num1: 10,
  num2: 20
},
computed: {
  total: function() {
    return this.num1 + this.num2;
  }
},
watch: {
  num1: function() {
    this.total = this.num1 + this.num2;
  },
  num2: function() {
    this.total = this.num1 + this.num2;
  }
}

위의 예제에서 num1 또는 num2가 변경될 때마다 total이 업데이트됩니다.

3. 깊은 감시 (Deep Watch)
객체나 배열과 같이 중첩된 데이터를 감시할 때 Watch 옵션을 deep: true와 함께 사용하여 객체 내부의 속성이나 배열의 요소까지 감시할 수 있습니다.

data: {
  user: {
    name: 'John',
    age: 30
  }
},
watch: {
  user: {
    handler: function(newUser, oldUser) {
      console.log('사용자 정보가 변경되었습니다.');
    },
    deep: true
  }
}

위의 예제에서 user 객체 내부의 name 또는 age가 변경될 때마다 Watch가 실행됩니다.

결론

Vue.js의 Watch 옵션은 데이터의 변화를 감시하고 이에 대응하는 동작을 정의하는 강력한 도구입니다. 이를 활용하여 비동기 작업을 처리하고, 계산된 속성을 업데이트하며, 깊은 데이터 구조를 감시할 수 있습니다. Vue.js 애플리케이션을 더 유연하고 반응적으로 만들기 위해 Watch 옵션을 활용해보세요