[Vue3] 디바운싱(디바운스) 구현하기

개발 중에 검색버튼이 없는 인풋을 구현했는데 인풋값이 바뀔 때 마다 api요청을 보내면 리소스 낭비가 심하기 때문에 마지막 인풋 후 일정시간 이후에 실행되는 디바운스를 구현하였다.

 

<template>      
      <input
        type="text"
        placeholder="Search..."
        class="navbar-input"
        @input="input_search_data = $event.target.value"
      />
</template>

 

<script>
import debounce from "lodash.debounce";

export default {
	...
  data() {
    return {
      input_search_data: "",
    };
  },
  
  watch: {
    input_search_data: debounce(function(e) {
      if (e == '') { 
        return //인풋값을 받았다가 1초안에 다시 지우는 경우 (인풋이 취소된 경우)
      } else {
        this.input_search_data = "" // 인풋값을 초기화하도록 구현하였음
        this.search_data(e) // api요청
      }
    }, 1000),
  },
}

</<script>

 

 

 

loadsh에서 debounce를 임포트 시킨 후

watch를 통해 input_search_data를 봐주면서 마지막 변경 후 1초가 지나면 인풋값으로 api요청을 보내면된다.

 

 

디바운스와 비슷한 용어로 쓰로틀링이 있는데, 이건 다음에 알아보도록 하겠다.