웹 앱 개발을 개선하기 위한 Vue.js 감시자에 대해 알아보세요.

by

주요 요점

  • Vue와 같은 자바스크립트 프레임워크는 컴포넌트 구조, 상태 관리, 라우팅 같은 기능을 제공함으로써 웹 애플리케이션 개발 과정을 더욱 간편하게 만들어줍니다.
  • Vue 감시자는 반응형 속성의 변화를 감지하고, 그에 따라 이벤트 처리나 데이터 변경 등의 동작을 수행할 수 있도록 해주는 기능입니다.
  • 감시자와 계산된 속성을 비교했을 때, 계산된 속성이 더 간결하고 코드를 이해하기 쉽게 만들어주어 성능 향상과 디버깅에 유리합니다.

자바스크립트 프레임워크는 웹 개발에서 핵심적인 요소가 되었습니다. 이는 컴포넌트 구조, 상태 관리, 라우팅 등 다양한 기능을 쉽게 사용할 수 있도록 해주기 때문입니다. 이러한 프레임워크는 웹 애플리케이션을 처음부터 개발하는 데 필요한 수고와 시간을 줄여줍니다.

Vue는 이러한 프레임워크 중 하나로, 개발 속도를 향상시키는 여러 기능을 제공합니다. 특히 감시자 기능을 통해 프로그램 실행 중에 변수나 표현식의 값을 실시간으로 모니터링할 수 있습니다.

Vue의 감시자란 무엇인가?

Vue 감시자는 반응형 속성의 변화를 감지하고 그에 따라 반응하는 기능입니다. 감시자를 활용하면 데이터 변경이나 특정 이벤트에 대해 적절한 동작을 실행할 수 있습니다.

감시자를 사용하려면 스크립트 내에서 Vue 패키지로부터 `watch` 함수를 가져와야 합니다.

 <script setup>
import { watch } from 'vue';
</script>

이제 `watch` 함수를 사용하여 Vue 컴포넌트에서 감시자를 구현할 수 있습니다. 다음은 간단한 예시입니다.

 <template>
  <div>
    <p>{{ user }}</p>
    <button @click="changeName">Change Name</button>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue';
const user = ref('Chinedu');
const changeName = () => {
  user.value="Victor"; // 사용자 이름 변경
};
watch(user, (newUser, oldUser) => {
  alert(`사용자 이름이 "${oldUser}"에서 "${newUser}"로 변경되었습니다.`);
});
</script>

이 간단한 컴포넌트는 `watch` 함수를 사용하여 사용자 이름의 변경을 감시합니다. 코드 조각의 템플릿 영역은 사용자 반응형 변수의 값을 표시하는 `p` 태그를 포함하여 컴포넌트의 HTML 구조를 정의합니다.

템플릿에는 클릭 이벤트에 연결된 `changeName` 함수를 가진 버튼 요소도 있습니다. 사용자 변수가 변경되면 Vue는 콜백 함수를 실행합니다. 콜백 함수는 “사용자 이름이 ‘Chinedu’에서 ‘Victor’로 변경되었습니다.”라는 알림을 표시합니다.

계산된 속성과 감시자 비교

감시자와 계산된 속성의 차이점을 이해하는 것은 중요합니다. 둘 다 Vue에서 반응형 도구로 사용되지만 사용 목적이 다릅니다.

예를 들어, 감시자를 사용하여 아버지와 아들의 나이 합계를 다음과 같이 계산할 수 있습니다.

 <template>
  <input type="text" placeholder="아버지 나이" v-model="father">
  <input type="text" placeholder="아들 나이" v-model="son">
  <p>총 나이: {{ total }}</p>
</template>
<script setup>
import { ref, watch } from 'vue';
const father = ref();
const son = ref();
const total = ref();
watch(son, (newAge, oldAge) => {
  total.value = Number(father.value) + Number(newAge)
})
watch(father, (newAge, oldAge) => {
  total.value = Number(newAge) + Number(son.value)
})
</script>

이 Vue 컴포넌트는 감시자를 사용하여 아버지와 아들의 나이 합계를 구합니다. 이를 위해 새로운 반응형 변수 `total`을 생성합니다. Vue의 Composition API를 사용하면 반응형 변수를 만들 수 있습니다.

그런 다음 코드 조각은 두 개의 감시자 함수를 사용하여 아들과 아버지의 나이를 확인합니다. 아버지 또는 아들의 각 나이에 대해 다른 사람의 나이와 새 값을 합산하고, 그 결과를 `total` 반응형 변수에 저장합니다.

이제 계산된 속성을 사용하여 위 코드 조각과 동일한 기능을 구현하는 상황을 고려해 보겠습니다.

 <template>
  <input type="text" placeholder="아버지 나이" v-model="father">
  <input type="text" placeholder="아들 나이" v-model="son">
  <p>총 나이: {{ total }}</p>
</template>
<script setup>
import { ref , computed } from 'vue';
const father = ref();
const son = ref();
const total = computed(() => {
  return Number(father.value) + Number(son.value);
});
</script>

이 코드는 이전 코드에 비해 더 간결하고 읽기 쉽습니다. 코드 조각은 아버지와 아들의 나이 합계를 계산하여 계산된 ref(변수) `total`에 저장합니다. 그런 다음 템플릿 섹션은 Vue의 데이터 바인딩 기술인 보간법을 사용하여 `total` 변수를 표시합니다.

감시자를 사용하여 두 나이의 합계를 구할 수도 있지만, 계산된 속성을 사용하는 것이 훨씬 좋습니다. 감시자를 사용하면 코드가 길어지고 로딩 시간이 늘어나며 디버깅이 더 어려워질 수 있습니다.

계산된 속성을 사용하는 것이 더 적절한 상황에서 감시자를 사용하지 마세요. 기존 반응형 데이터를 기반으로 새로운 데이터를 파생시키려는 경우, 감시자를 사용하여 데이터 변경 사항을 모니터링하고 그에 따라 계산된 속성을 반응시킵니다.

`immediate` 옵션은 감시자를 생성할 때 사용할 수 있는 설정입니다. 이 옵션은 Vue가 컴포넌트를 마운트한 후 감시자가 콜백을 즉시 실행해야 하는지를 결정합니다.

다음은 `immediate` 옵션을 사용하는 감시자 컴포넌트의 예시입니다.

 <script setup>
import { ref, watch } from 'vue';
const count = ref(10);
watch(
  count,
  (newCount, oldCount) => {
    console.log(`Count changed from ${oldCount} to ${newCount}`);
  },
  { immediate: true }
);
</script>

위 코드에서 감시자는 컴포넌트 초기화 시 즉시 콜백을 실행하고, “Count changed from undefined to 10″을 콘솔에 출력합니다. 이는 Vue가 `count` ref에 값 10을 할당하기 전에 초기 변수가 정의되지 않았음을 보여줍니다.

`immediate` 옵션은 감시된 속성의 현재 값을 기반으로 초기 작업이나 초기화를 수행하려는 시나리오에서 유용합니다. 예를 들어, Vue가 컴포넌트를 마운트한 후 앱이 API에서 데이터를 가져와야 하는 경우입니다.

Vue 감시자에서 사용할 수 있는 `deep` 옵션

Vue 감시자에서 사용할 수 있는 `deep` 옵션을 사용하면 중첩된 객체 또는 배열 내부의 변경 사항을 세밀하게 감시할 수 있습니다. 이 옵션을 `true`로 설정하면 감시자가 중첩된 속성 내에서 발생하는 변경 사항을 감지할 수 있습니다.

다음은 `deep` 옵션이 있는 Vue 컴포넌트의 예시입니다.

 <script setup>
import { ref, watch } from 'vue';
const data = ref({ length: 42 });
watch(
  data,
  (newData, oldData) => {
    console.log(`Data changed"`);
  },
  { deep: true }
);
// 이것은 중첩된 변경이기 때문에 감시자를 트리거합니다.
data.value.length = 43;
</script>

위 코드는 `length` 속성을 포함하는 객체로 `data` 참조를 초기화합니다. 코드는 `deep` 옵션을 `true`로 설정합니다. 그런 다음 `length` 속성이 43으로 변경된 후 데이터가 변경되었다는 것을 콘솔에 기록합니다.

`deep` 옵션을 `true`로 설정하지 않으면 감시자 함수는 객체의 변경 사항을 인식하지 못합니다. 하지만 Vue는 데이터 변수를 반응형 객체로 초기화할 때 `deep` 옵션 없이도 모든 중첩 및 심층 변경 사항을 추적합니다.

 <script setup>
import { ref, watch } from 'vue';
const data = reactive({ length: 42 });
watch(
  data,
  (newData, oldData) => {
    console.log(`Data changed"`);
  }
);
// 이것은 반응형 객체를 변경하므로 감시자를 트리거합니다.
data.length = 43;
</script>

위 코드에서 `watch` 함수는 `data` 변수가 반응형 객체이기 때문에 데이터가 변경되었다는 것을 콘솔에 기록합니다.

Vue 감시자를 사용하여 더 나은 앱 구축

Vue의 감시자는 애플리케이션에서 세분화된 반응성을 달성하는 데 도움을 줄 수 있습니다. 데이터 속성의 변경 사항을 감시하고 이에 대한 응답으로 맞춤형 로직을 실행하는 방법을 제어할 수 있습니다.

감시자를 언제 사용해야 하는지, 계산된 속성과의 차이점, `immediate` 및 `deep`과 같은 옵션을 이해하면 반응형 Vue 애플리케이션을 구축하는 능력이 크게 향상될 것입니다.