TIL 14 이벤트관리 Debounce, Throttle (lodash)

TIL 14 이벤트관리 Debounce, Throttle (lodash)

우리가 실시간으로 ‘감사합니다’ 를 검색할때 ㄱ,ㅏ,ㅁ,ㅅ,ㅏ,ㅎ,ㅏ,ㅂ,ㄴ,ㅣ,ㄷ,ㅏ라고 칠ㄸ 연관 검색어가 같은걸 빨리 바꿔줄수있는데 너무 빨리 한다면 서버 요청이 날아가는걸 막기위해 특정시간마다 1번씩 또는 키보드 입력이 멈출때만 1번 연관검색이 뜨게 줄일수있다. 따라서 이런 연관 검색어 부분의 엄청난 랜더링도 막아 줄수있다.

또한 파이어스토어에서는 무료 요청횟수가 한정적이라 더이상 요청못할수도있다. 따라서 이런걸 막기위해서 debounce와 Throttle 을 사용한다.

Debounce란?

이벤트가 일어나면, 일정 시간을 기다렸다가 이벤트를 수행한다. 일정시간 내에 같은 이벤트가 또 들어오면 이전 요청은 취소한다.

throttle이란?

일정시간동안 일어난 이벤트를 모아서 주기적으로 1번씩 실행해준다. ( debound랑 다르게 이전 요청을 취소하지않고 모은다는것)

어떤게 좋은지 상황마다다르다.

예를들어 스크롤을 내릴때마다 스테이지바가 점점 차는 효과가 있다면 debounce 같은경우 일정시간을 기다렸다가 수행하기때문에 실시간으로 바가 차는 느낌이 안들것이다.

하지만 throttle 같은 경우는 이벤트가 발생한직후부터 카운트하고 스크롤을 하는중에도 카운트하고난후 실행값을 반환해서 보여주기때문에 더 스무스하게 보여준다,

만약 연관검색어를 예를 든다면 debounce 가 더 좋을수있다 예를들어 가 만쳤는데 연관검색어가 뜬다면 비효율적이기때문에 throttle처럼 주기적으로 모은걸 보내는것보다 debounce처럼 일정시간후 입력한것에 대한 마지막 요청으로 연과검색어를 주는게 효율적이다. 따라서 상황에따라 debounce나 throttle을 골라서 사용해야한다.

Lodash

자바스크립트 유틸리티 라이브러리이다.

이것을 이용해 debounce 와 throttle을 만들어서 쓸수있다.

먼저 import _ from “lodash” 를 쓴후

이런식으로 onChnage 처럼 _를 import 하고 변수를 각각 debounce, throttle 이라고 한다음 _안에 debounce, throttle 함수를 사용하여 input 속성 onChange 값에 넣어줘서 비교해본다. Debounce 같은경우 이벤트가 계속 있다면(키보드입력값) 그때동안은 카운트하지않다가 이벤트가 끝날때(키보드를 치지않을떄)그떄부터 200milliseconds 을 카운트한후 거기에 있던 값을 console 로 찍어주었다.

Throttle 경우는 이벤트가 발생한후 이벤트가 끝나지 않더래도 정해진 시간을 카운트하여 출력해준다.

from http://youngble.tistory.com/60 by ccl(A) rewrite - 2021-12-02 19:01:47