데이터 감시자

Vue.js 데이터 감시자: 변화에 반응하는 강력한 도구

소개

Vue.js는 데이터가 변경될 때마다 자동으로 UI를 업데이트해주는 반응형 프레임워크입니다. 이러한 반응성을 가능하게 하는 핵심 기능 중 하나가 바로 데이터 감시자입니다. 데이터 감시자는 특정 데이터의 변화를 감지하고, 그에 따라 지정된 함수를 실행하여 부수 효과를 일으키는 역할을 합니다.

데이터 감시자의 필요성

• 동적 UI: 사용자 상호작용이나 서버로부터 받아온 데이터에 따라 UI를 실시간으로 변화시켜야 할 때
• 비동기 작업: 비동기 작업의 결과에 따라 UI를 업데이트해야 할 때
• 계산된 속성: 다른 데이터를 기반으로 계산된 값을 자동으로 업데이트해야 할 때

728x90

데이터 감시자 사용법

Vue.js에서 데이터 감시자를 사용하는 방법은 크게 두 가지가 있습니다.

1. watch 옵션

<template>
  <div>
    <p>메시지: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log('메시지가 변경되었습니다:', newValue, oldValue);
      // 다른 작업 수행
    }
  }
}
</script>

 

• watch 옵션은 컴포넌트 옵션 객체에 정의합니다.
• 객체의 키는 감시할 데이터의 이름이고, 값은 변경될 때 호출될 함수입니다.
• 함수의 첫 번째 매개변수는 새로운 값, 두 번째 매개변수는 이전 값입니다.

2. watchEffect 함수 (Composition API)

<script setup>
import { ref, watchEffect } from 'vue';

const count = ref(0);

watchEffect(() => {
  console.log('카운트가 변경되었습니다:', count.value);
  // 다른 작업 수행
});
</script>

 

• watchEffect 함수는 Composition API에서 제공하는 함수입니다.
• 함수 내부의 코드가 실행될 때마다 감시가 설정되며, 함수 내부에서 참조하는 반응형 값이 변경될 때마다 다시 실행됩니다.

데이터 감시자의 종류

• 깊은 감시: 객체 내부의 값이 변경될 때까지 감시합니다. deep: true 옵션을 사용하여 설정합니다.
• 즉시 실행: 컴포넌트가 생성될 때 바로 감시 함수를 실행합니다. immediate: true 옵션을 사용하여 설정합니다.
• 일회성 감시: 한 번만 실행하고 더 이상 감시하지 않습니다. watchOnce 함수를 사용합니다.

데이터 감시자 활용 예시

• 데이터 유효성 검사: 입력 값이 변경될 때마다 유효성을 검사하고 에러 메시지를 표시합니다.
• 데이터 변환: 서버에서 받아온 데이터를 클라이언트에서 사용하기 쉽도록 변환합니다.
• 비동기 요청: 입력 값이 변경될 때마다 서버에 데이터를 요청하여 UI를 업데이트합니다.
• 데이터 로깅: 데이터 변경 내역을 로그에 기록합니다.

주의 사항

• 무한 루프: 감시 함수 내에서 감시 대상 데이터를 직접 변경하면 무한 루프가 발생할 수 있습니다.
• 성능: 너무 많은 데이터를 감시하거나 복잡한 연산을 수행하는 감시 함수는 성능 저하를 야기할 수 있습니다.

결론

데이터 감시자는 Vue.js 개발에서 매우 중요한 역할을 합니다. 데이터 감시자를 효과적으로 활용하면 더욱 동적이고 반응성이 뛰어난 웹 애플리케이션을 개발할 수 있습니다.