Vu2에서 watch함수를 사용할 때

시계는 watch, Vue2에서 조건감시자 사용법 바로 가기

Vue3 + script setup에서 사용하기

이전에는 Vue2를 사용하여 개발을 하였는데, 이번 프로젝트는 Vue3를 사용하고 있다. 사용법은 크게 차이가 없으나, watch 함수를 반응형 데이터ref와 reactive와 사용할 때 사용법이 달라 정리하려고 한다.

Vue3에서 watch 함수 기본 사용법

나는 로그인시 에러가 발생하면 q-input의 rules를 사용하기 때문에 error 처리하여 인풋박스 하단에 에러메세지를 보여주도록 유효성검사를 하였다.
(quasar는 유효성 검사를 조금 더 쉽게 사용할 수 있는데 이건 나중에 추가로 작성하겠음)

그러나 input에 접근하여 재입력 하는 경우 이전에 발생한 유효성검사 error문구가 사라져야 하는데 지워지지 않아 버그로 잡히게 되었다.

그래서 input을 실시간으로 감시하여 작동하도록 해야했다.....
따라서 데이터가 실시간으로 바뀔수 있게 반응형 데이터를 reactive를 활용하여 생성하였으며, 기존 사용법을 참고하여 watch를 사용하였다.

// 로그인 정보 관련 관련 
<script setup>
  
const managerFormValue = reactive({
  managerId: '',
  managerPwd: '',
  otpNum: '',
  record: false,
  tel: '',
});

//유효성 검사
let errorMessage = ref('');
let isValid = computed(() => errorMessage.value == '');
const isValidFormat = (val) => {
  errorMessage.value = Global.loginPwFormat(val);
};

const clearError = () => {
  errorMessage.value = '';
};

watch(managerFormValue.managerId, () => {
  clearError();
});

</script>

그러나 watch함수가 왜 작동하지 않는지 알수가 없었다. 기존에 watch를 사용할 때는 이런 식으로 잘만사용했다.
시계는 와치... 기존에 사용하던 방법

//날짜 변경시 api 재호출
watch(getSearchDate, () => {
  getDashboardAccountApi();
 });

반응형데이터를 watch로 감시할 때

오랜 고민 결과 ref와 reactive 차이 때문에 watch가 안먹히는것이였다!!!
reactive 로 만들어진 객체는 직접적으로 감시할 수 없다고 한다.
그래서 reactive 로 만들어진 객체를 감시하려면, 접근하는 시점에서 함수를 사용하여 감시 대상을 반환시켜야 한다.

reactive를 사용할 경우

() => managerFormValue.managerId와 같이 함수를 사용하여 managerFormValue.managerId를 감싸야 한다.

watch(() => managerFormValue.managerId, () => {
  clearError();
});

차이점을 알겠는가? 모르면 그냥 이렇게 써.

ref를 사용할 경우

ref로 만들어진 경우에는 .value속성에 실제 값을 가지고 있으므로 직접적으로 사용할 수 있다.

watch(managerFormValue.managerId, () => {
  clearError();
});

그런데 나는 managerId값과 managerPwd의 값 즉 유효성검사 오류 출력 후 아이디, 비밀번호 재입력할 경우 해당 input v-model을 watch를 사용하고 감시하고 싶을 땐, 이렇게 입력하면 된다.

watch([() => managerFormValue.managerId, () => managerFormValue.managerPwd], () => {
  clearError();
});

왜 이렇게 사용하나면, watch 함수는 두가지 형태로 사용될 수 있다고 한다.

watch 함수의 두가지 형태

1. 단일 속성을 감시할 경우

watch(
  () => managerFormValue.managerId,
  (newValue, oldValue) => {
    // 속성 값이 변경될 때 실행되는 로직
  }
);

managerFormValue.managerId의 값이 변경될 때마다 두 번째 인자로 전달된 콜백 함수가 실행, 이 콜백 함수는 새 값(newValue)과 이전 값(oldValue)을 인자로 받아 실행된다.

2. 여러 속성 감시할 경우

watch(
  [() => managerFormValue.managerId, () => managerFormValue.managerPwd],
  (newValues, oldValues) => {
    // 속성 값이 변경될 때 실행되는 로직
  }
);

managerFormValue.managerId와 managerFormValue.managerPwd 두 속성의 변경을 함께 감시하고 있으며, 이 경우 콜백 함수는 감시 중인 모든 속성의 새 값들(newValues)과 이전 값들(oldValues)을 Array 형태로 받아 실행된다.

그리하여 반응형 데이터를 watch와 함께 사용할 때 매우 주의하도록 하자!

watch를 사용해도 바로 반영되지 않을 때, 비동기처리할 때

데이터를 실시간으로 확인하면서 비동기처리하여 작업하려 하였으나, 바로 감지하지 못하였을 때 해결하는 간단한 방법은 nextTick() 사용하기!

변경되는 데이터를 통해, 호출되는 모든 API를 확인하고, API가 모두 처리 되면 작업을 수행하도록 하고 싶었다.

watch(searchDate, async () => {
  await nextTick();
  try {
    emitter.emit('showLoading');
    await callApis();
  } catch (err) {
    handleApiError(err);
  } finally {
    emitter.emit('hideLoading');
  }
});

이렇게 사용하면, 데이터를 실시간으로 확인하여 원하는 작업도 진행하고, 비동기 처리하여 에러도 확인하고 ! 아주 간단하다!

그럼 잘 사용해보라고 ADIOS!