Debounce는 연속적으로 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것입니다. 왜 이렇게 하는 것일까요? 우리는 사용자의 마지막 행동에만 관심이 있기 때문입니다. 검색을 하는 방법에도 여러가지가 있을 것입니다. 예를 들어 검색어를 입력하고 검색버튼을 눌렀을 때 검색이 되게 하는 방법, 또는 검색어를 입력만 하면 버튼을 누르지 않아도 검색이 되게 하는 방법이 있을 것 입니다.
버튼을 눌러서 검색을 하는 방법은 디바운싱이 필요 없을 것입니다. 검색을 눌렸을 때 검색하는 api를 호출하면 되기 때문이죠. 하지만 검색어를 입력만 했을 때 검색이 되게 하는 방법에는 디바운싱을 해주지 않으면 한글자 한글자를 칠 때마다 api를 호출하여 수 많은 호출이 일어날 것입니다.
구글이나 유튜브 등 수 많은 오픈 api에는 하루 검색 할당량이 있기 때문에 순식간에 소진 되어 버릴 수도 있고, 개인 서버를 쓰고 있을 경우에도 수 많은 api 호출로 인해 서버가 터지는 등의 현상이 있을 수 있습니다.
그래서 Debounce를 적용하여 사용자의 검색어 입력이 몇초 이상 없을 때만 api 호출을 하게 만드는 것입니다. 사람들은 보통 검색할 때, 한번에 타타타닥 검색 하기 때문에 적당한 시간을 걸어둔다면 사용자가 원할 때에 한번만 api 호출을 할 수 있게 되어 최적화가 될 것 입니다.
구현 코드
이번에 스터디 과제를 하며 이런식으로 구현해보았습니다.
export default function SearchInput({ target, searchGif }) {
this.$target = target;
this.timer = null;
this.$target.addEventListener('keyup', (e) => {
try { // api 호출 도중에 에러가 날 수 있으므로 try, catch로 감싸주었습니다.
if (this.timer) { // this.timer가 있을 경우에는 clearTimeout을 해줍니다.
clearTimeout(this.timer);
}
const text = e.target.value.trim(); // 앞, 뒤로 빈칸을 제거해주었습니다. 그러한 text가 있을 때에 api을 호출해주었습니다.
// text가 있다면 0.55초 뒤에 searchGif라는 함수를 통해 api를 호출해줍니다. 0.55초로 한 이유는 그 정도가 적당해보였습니다 ㅎㅎ
if (text) {
this.timer = setTimeout(searchGif({ text, isHistory: false }), 550);
}
} catch (error) {
console.error(error);
}
});
}참고자료
https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fa
https://webclub.tistory.com/607
