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