검색어 입력하는 동안 API 호출 지연하기 - 디바운스(Debounce)

디바운스와 쓰로틀 완벽 이해하기

짧은 시간 내에 연속해서 호출되는 이벤트 핸들러들(검색어 입력, 스크롤 이벤트 등)은 과도한 호출로 인해 성능에 문제를 일으킬 수 있다.
디바운스와 쓰로틀을 적절히 사용하면 성능 문제를 개선할 수 있다.

 

 

debounce

정의

 

연이어서 함수가 호출될 때 앞에서 호출된 함수들은 모두 취소하고, 제일 마지막의 함수만 호출되도록 하는 것. 예를 들어 시간을 200ms로 설정한다면 200ms가 다 지나가기 전에 연달아서 함수가 호출된다면 이전의 타이머는 취소하고, 다시 새롭게 타이머를 설정. 이것을 반복하다가 결국 마지막 함수가 호출되면 (더이상 함수가 호출되지 않으면) 함수를 호출한다.

 

 

활용

 

검색어 입력 등의 작업을 할 때, 밑에 연관된 검색어를 보여주는 기능을 많이 봤을 것이다. 이 기능에 디바운스를 적용하지 않는다면, 사용자가 입력하는 글자 하나하나마다 서버에 요청을 보내게 되는데 이는 불필요한 비용을 낭비하는 것으로, 적절히 디바운스를 활용하면 비용을 줄일 수 있다.

 

 

throttling

정의

 

마지막으로 함수가 호출된 후 일정 시간 동안은 함수가 호출되지 않도록 하는 것. 함수 주기를 만든다. 예를 들어 2000ms 로 설정한다면 2000ms 에 한 번 함수가 호출되는 것.

 

 

활용

 

스크롤 이벤트 등에 쓰로틀링을 적용하여 일정 시간에 한 번 이벤트 핸들러가 동작하도록 할 수 있다.

 

 

프로젝트에 적용

코드 리팩토링 전

 

바닐라 자바스크립트로 만든 검색 사이트에 적용을 해봤다. 검색창 밑에 사용자가 입력한 글자가 포함된 모든 내역을 보여주기 때문에 기존 코드에서는 그냥 한 글자마다 api 호출을 하게 되는 정직한 코드였다.

 

 

디바운스 적용 전.

 

코드 리팩토링 후

 

디바운스 적용 후.

 

 

물론 타이머 설정을 200ms로 했기 때문에 200ms 이상 기다리다가 다음 글자를 치면 디바운스 적용 전이나 후나 차이가 없긴 하다. 하지만 타자가 빠른 사용자가 검색했다면 api 호출을 9번 할 것을 2번이나 1번으로 줄일 수도 있게 된 것! 리팩토링 끝!