Throttling & Debouncing

kimdev·2022년 6월 11일
0

쓰로틀링과 디바운싱

우리가 쓰로틀링과 디바운싱을 배우기 전에 만약 무한스크롤 혹은 검색과 같이 

페치요청을 계속 보내는 기능을 구현했다면 아마 엄청나게 많은양의 요청과

스테이트의 최신화로 계속해서 리렌더링이 되며 서버컴퓨터 혹은 브라우저에
엄청난 부하가 갈 것이다.

이를 보완해 주는것이 바로 쓰로틀링과 디바운싱이다.

Throttling(쓰로틀링)

  1. 이벤트를 일정 주기마다 실행시켜 주는 것.

  2. 마지막 함수가 실행되고 일정시간이 지나야 함수가 실행되게 한다.

우리가 예전에 배웠던 setTimeOut함수를 이용해서 구현하면된다.

Debouncing(디바운싱)

  1. 일정시간이 지난 후에 작동되게 하는 것.
디바운싱은 직접 구현할수도 있지만 나는 lodash라이브러리를 이용했다.

lodah에 있는 디바운싱함수를 이용하면 코드한줄로 디바운싱을 구현할 수 있다.

만약 우리가 버튼이 없는 검색창을 구현하려면 onChange를 이용해
event.target.value가 변경될 때마다 패치요청을 보내야 할 것이다.

하지만 디바운싱을 이용하면 체인지 인벤트가 발생하고 개발자가 설정한 초가 지나야
패치요청이 되게 만들수 있다. 이렇게 하면 검색어를 입력하는 순간에는
패치요청을 날리지 않고 입력이 끝나고 1초후 패치요청을 날릴 수 있다.

0개의 댓글