1. Debounce란 ?

Debounce는 이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술

Debounce ⇒ 입력이 끝날 때 까지 무한적으로 기다림

2. Debounce를 왜 쓰는가?

debounce는 연속적으로 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것, 예를 들어 검색 버튼을 눌러서 api를 호출하는 함수는 debounce가 필요없음(누를 때만 api가 호출되기 때문에) 그러나 검색어를 입력했을 때 api가 호출되는 함수는 한글자 한글자 칠 때마다 api를 호출해서 수많은 호출이 일어나기 때문에 이것을 제어해서 리소스를 줄일 필요가 있음, 따라서 debounce를 적용해서 사용자의 검색어 입력이 몇 초 이상 없을 때만 api호출을 하게 만듬

Debounce 사용 예시

• Resize : 데스크탑의 브라우저 창 크기를 조정하는 경우
• 검색어 입력 : 글자를 입력해서 연관 검색어가 나오게 하는 경우

3. 내가 활용한 Debounce

input 값에 검색어를 입력했을 때 입력할 때 마다 api 호출을 요청하는게 아니라 검색어를 다 입력한 뒤에 api 호출 요청을 보내고 싶었기 때문에 검색어를 입력하고 일정 시간이 지나면 api 호출을 요청하도록 하는 기능이 필요했음 ⇒ debounce를 활용 (글자를 입력한 후 일정시간이 지나면 API요청이 가게 된다.)

Ex) 기존에 ‘hello’를 입력했을 때