프론트엔드✏️/코드캠프
Throttling & Debouncing
당근먹는하니
2022. 6. 6. 00:55
728x90
반응형
쓰로틀링과 디바운싱은 일종의 프로그램 기법이다.
둘의 차이는 이벤트를 언제 처리하느냐에 있다.
Throttle : 조르다, 압력 조절.
요청, 이벤트가 너무 많이 발생할 때, 처음 이벤트만 처리하고 일정시간 동안 그 뒤의 요청과 이벤트는 무시하는 방식
Debouncing : 전자공학쪽에서 bouncing개념과 함께 쓰이는 것 같다. 코딩에서 디바운싱은 요청, 이벤트에 대한 작업이 너무 자주 실행되지 않도록 함수가 호출되는 것을 제한하는 프로그래밍 기법이다. 딜레이를 주고 그 딜레이가 임계값에 도달하면 그때 함수 처리를 한다.
즉, 사용자가 입력을 중지한 후 x초 후 에만 검색을 수행하게 한다 -> debouncing
사용자가 입력하는 동안 x초 마다만 검색을 수행한다 -> throttling
자동 완성 기능이 있는 검색창을 구현할 때, 그 리스트를 보여주기 위해서는 타이핑을 할 때마다 API 요청을 해야 하는데 이런 방식은 너무 과도한 API 요청을 발생시킨다. 디바운싱을 사용하면 함수 호출은 여러번 일어나지만, 일정 시간의 마지막 호출에 대해서만 API를 요청한다.
리액트에서 타이머, useCallback을 이용하여 구현할 수 있다.
간단하게 구현해보는 건...! 다음주에 해보겠다. 진짜로.
728x90
반응형