Debounce / Throttle

API를 연동해서 키워드 검색 등을 구현할 때 콘솔에 한 글자, 한 글자 정성스럽게 찍히는 것을 경험해보았을 것이다. (하게 될 것이다.) 이런 경우 API는 매 타이핑마다 호출이 되고 이는 곧 리소스 낭비와 성능 저하로 이어진다.

이럴 때 자주 발생하는 이벤트들을 적절히 Filtering 해야할 필요가 있다. Debounce와 Throttle 기법은 이러한 이벤트들을 Flitering하는 기법의 종류이다.

💡 먼저 Debounce는

- 회원가입 필드 유효성 검사
- 키워드 검색 혹은 자동 완성 기능에서 API 함수 호출 횟수를 최대한 줄이고 싶을때
많이 사용된다.

왜 저런 상황에 많이 사용되느냐?
일정 시간 동안 연속적으로 발생했던 이벤트들 중 마지막만 실행시켜 과도한 호출이나 렌더를 막아 주기 때문이다.

💡 그럼 Throttle 은?

- 버튼 중복 클릭 방지
- 활성화 처리
에 많이 사용된다.

왜 저런 상황에 많이 사용되느냐?
일정한 간격을 두고 기능을 작동하게 함으로써, 너무 많은 연속 동작으로 인해 화면이 느려지는 현상을 방지할 수 있기 때문이다.

 

얼핏 두개를 보면 비슷해 보이고 같은 기능처럼 보이기도 한다. 하지만 각각 동작 방식과 쓰임새가 달라 적절한 상황에 사용을 해야한다. 이는 아래 이미지를 통해 어떤 식으로 동작하는지 쉽게 이해할 수 있다.

 

마지막으로 사용법에 관련한 내용들은 이 페이지에 다 적기엔 양이 많은 것 같아 많이 참고했던 블로그를 소개한다. 쉬운 예제 코드와 설명으로 잘 이해할 수 있었던 블로그이다.

💡 https://onlydev.tistory.com/151

 

참고
https://onlydev.tistory.com/151  
https://velog.io/@kskim625/디바운싱-쓰로틀링