[콜럼Vue스] 관찰 속성(Watcher, Watch Property)

**관찰 속성(Watcher, Watch Property)**은 Vue.js에서 특정 데이터를 **감시(watch)**하고, 그 데이터가 변경될 때마다 특정 로직을 실행할 수 있는 기능임. 워치 속성은 주로 비동기 작업, 데이터 변화를 기반으로 한 추가 처리 또는 복잡한 연산이 필요할 때 유용하게 사용됨.

Vue의 반응형 시스템은 data나 computed의 값을 자동으로 갱신해주지만, 때로는 특정 데이터의 변화를 수동으로 감시하고, 그에 따라 추가 작업이 필요한 경우가 있음. 이럴 때 관찰 속성을 사용하여 필요한 동작을 처리할 수 있음.

---

1. 관찰 속성의 기본 개념

Vue에서 관찰 속성을 사용하면, data나 computed의 특정 변화를 감지하고, 그 변화에 대응하는 로직을 실행할 수 있음. 관찰 속성은 Vue 인스턴스 내에서 watch 옵션을 통해 정의됨.

watch: {
  dataName(newValue, oldValue) {
    // newValue: 변경된 새로운 값
    // oldValue: 이전 값
    // 데이터가 변경될 때 실행될 로직
  }
}

2. 관찰 속성의 예시

예시 1: 데이터 변경 시 콘솔 출력

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    },
    watch: {
      message(newValue, oldValue) {
        console.log(`Message changed from "${oldValue}" to "${newValue}"`);
      }
    }
  });
</script>

• watch 속성에서 message 변화를 감지하고, message가 변경될 때마다 이전 값과 새로운 값을 콘솔에 출력함.
• 입력 필드에서 message를 변경할 때, 해당 변경을 감지하여 로직을 실행함.

---

3. 관찰 속성의 사용 시기

관찰 속성은 다음과 같은 상황에서 유용하게 사용됨:

(1) 비동기 작업 처리

데이터가 변경되었을 때 API 호출이나 비동기 작업을 처리해야 하는 경우.

예시: 검색어가 변경될 때 서버에 요청 보내기

watch: {
  searchQuery(newQuery) {
    // searchQuery가 변경될 때마다 서버에 API 요청을 보냄
    this.fetchResults(newQuery);
  }
},
methods: {
  fetchResults(query) {
    // API 호출 로직
    console.log(`Fetching results for: ${query}`);
  }
}

• **searchQuery**가 변경될 때마다 서버에 API 요청을 보내서 결과를 가져오는 예시임.

(2) 복잡한 연산 처리

관찰 속성은 데이터가 변경될 때마다 추가적인 연산이나 처리 로직이 필요한 경우에 사용됨.

---

4. immediate와 deep 옵션

(1) immediate 옵션

immediate 옵션은 데이터가 처음으로 정의될 때도 관찰 속성이 즉시 실행되도록 설정하는 옵션임. 기본적으로 관찰 속성은 데이터가 변경될 때만 호출되지만, immediate: true로 설정하면 Vue 인스턴스가 생성될 때도 호출됨.

watch: {
  message: {
    handler(newValue) {
      console.log(`Message: ${newValue}`);
    },
    immediate: true // 인스턴스가 생성될 때도 바로 실행
  }
}

• message의 초기 값이 즉시 출력됨. 즉, 데이터가 변경되지 않아도 바로 실행됨.

(2) deep 옵션

Vue의 반응형 시스템은 기본적으로 객체 내부의 프로퍼티 변화를 감지하지 않음. 객체나 배열의 중첩된 속성을 감지하려면, deep: true 옵션을 사용하여 깊은 감시를 설정해야 함.

예시: 중첩된 객체 속성 감시

data: {
  user: {
    name: 'Tom',
    age: 25
  }
},
watch: {
  user: {
    handler(newUser) {
      console.log(`User updated: ${newUser}`);
    },
    deep: true // 객체 내부 속성까지 감시
  }
}

• user 객체의 내부 속성(name, age)이 변경될 때도 변화를 감지할 수 있음.

---

5. 관찰 속성과 계산된 속성의 차이

(1) 관찰 속성(Watch)

• 데이터 변화에 따른 부작용 처리가 필요할 때 주로 사용됨.
• 주로 비동기 작업, 타이머 또는 데이터 변경 후 추가 작업이 필요한 경우에 적합함.

(2) 계산된 속성(Computed)

• 특정 데이터의 변화에 따라 새로운 값을 계산하여 반환할 때 사용됨.
• 데이터 변화에 따라 자동으로 캐싱된 결과를 반환하므로, 성능 최적화에 유리함.

차이점 요약:

• 계산된 속성은 데이터 변화를 기반으로 값을 반환하고, 캐싱된 값을 사용함.
• 관찰 속성은 데이터가 변경될 때 **부가적인 동작(비동기 작업 등)**을 실행하는 용도로 사용됨.

6. 관찰 속성의 활용 예시

(1) API 호출 후 결과 처리

데이터가 변경될 때 서버에 요청을 보내고 그 결과를 처리하는 예시.

watch: {
  searchTerm(newTerm) {
    if (newTerm) {
      this.fetchSearchResults(newTerm);
    }
  }
},
methods: {
  fetchSearchResults(query) {
    // 비동기 API 호출 예시
    fetch(`https://api.example.com/search?q=${query}`)
      .then(response => response.json())
      .then(data => {
        this.results = data;
      });
  }
}

• **searchTerm**이 변경되면, 자동으로 API 호출을 하여 결과를 받아오고, 그 결과를 처리함.

(2) 객체의 중첩된 속성 감시

객체의 깊은 감시를 사용하여, 내부 프로퍼티 변경을 감지하는 예시.

data: {
  settings: {
    theme: 'light',
    notifications: {
      email: true,
      sms: false
    }
  }
},
watch: {
  settings: {
    handler(newSettings) {
      console.log('Settings updated:', newSettings);
    },
    deep: true // 중첩된 객체 내부도 감시
  }
}

• settings 객체의 내부 속성이 변경될 때도 자동으로 감지하고, 관련 로직을 실행함.

---

요약:

• **관찰 속성(Watcher)**은 Vue에서 특정 데이터를 감시하고, 그 데이터가 변경될 때마다 특정 로직을 실행할 수 있게 해줌.
• watch 옵션을 사용해 정의하며, 주로 비동기 작업, 복잡한 연산, 데이터 변화에 따른 부가 작업을 처리하는 데 유용함.
• **immediate**와 deep 옵션을 통해 즉시 실행되거나, 중첩된 객체를 감시할 수 있음.
• 계산된 속성과 달리 관찰 속성은 값 계산이 아닌 변화 감지 후 추가 작업에 주로 사용됨.