무한루프라니!! 아이디 중복 확인 기능

계정을 생성하는 화면이 있었는데, 그 화면에 중복확인 기능이 들어가야 했다.

그래서 내가 중복확인 기능을 추가하기로 했는데,

분명 로컬에선 잘 돌아가던 기능이.. 서버에 올라가니까 먹통이 되었다..?

아예 무한 루프에 걸려서 화면이 멈춰버렸다...

<q-input
                ref="idInputRef"
                v-model="idInput"
                maxlength="50"
                :rules="[required_rule, id_rule]"
              />
              <q-btn
                class="y-btn"
                label="중복 확인"
                :disable="idInput.length === 0 || !checkIdValidation()"
                @click="checkDuplicateId"
              />
              
<script setup lang="ts">
const checkIdValidation = () => {
  if (idInputRef.value.validate()) {
    return true;
  } else {
    return false;
  }
};
</script>

내 의도는 idInput의 값이 없거나 validation 체크에 실패하면 버튼을 disable처리하는거였는데,

idInput에 입력만 하면 화면이... 멈춰 버리니 실서버에서는 아이디를 생성 조차 할 수 없는 상황이 되어버렸다.

 

왜 자꾸 무한루프에 걸리는건지 알아보니 v-model="idInput"으로 인해서 idInput이 바뀔 때마다 checkIdValidation이 호출되기 때문이라고 한다.

 

그래서 computed 속성을 이용해서 idInput에 값이 없거나 validation을 만족하지 않으면 false를 반환하도록 했고,

이렇게 변경하니 무한루프에 걸리지 않고 코드가 제대로 작동하게 되었다.

 <q-input
                ref="idInputRef"
                v-model="idInput"
                maxlength="50"
                :rules="[required_rule, id_rule]"
              />
              <q-btn
                class="y-btn"
                label="중복 확인"
                :disable="idDisabled"
                @click="checkDuplicateId"
              />
              
 
 <script setup lang="ts">
 
 // 입력한 아이디가 validation을 만족할 때만  중복체크 버튼 활성화
const idDisabled = computed(() => {
  return (
    (idInput.value.length === 0 || idInputRef.value?.hasError) ?? false
  );
});

 </scirpt>

 

처음 만난 무한루프였는데, vue에서 제공하는 기능들을 제대로 이해하지 않으면 

또 다시 무한루프를 만날 수도 있겠다는 생각이 들었다.

ref, computed 등을 다시 이해하는 시간을 가져야겠다는 생각을 하게 되었던 기능이었다.