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 경우는 이벤트가 발생한후 이벤트가 끝나지 않더래도 정해진 시간을 카운트하여 출력해준다.

 

 

onChange에서 제대로 동작하지 않는현상

그런데 위에처럼 onChange안에서  state을 Set할경우 debounce가 원래대로 작동안하고 입력한대로 계속 출력해준다. 이유는 search 컴포넌트가 함수형 컴포넌트이기떄문이다. 리랜더링될때 변수들도 초기화되기때문에 설정한시간을카운트하지않고 throttle은바로 뽑아내거나, debounce는 이벤트가끝날때 똑같은값이 후두두두두 나온다.

 

useCallback

그래서 이럴때 useCallback 을 쓴다. 이 useCallack 은 리랜더링 되더라도 이 함수를 초기화 하지말라고 설정해준다 내가 memorizing 한 데이터는 계속쓸거다 라는것이다. 

위의 사진처럼 설정해주고 실행해보면 원래 debounce 역할을 잘한다. 

 

useCallback 인자값을 각각설명하자면 실행할 함수가 첫번째인자이고, 두번째는 useEffect처럼 []안에 들어있는 값이 변할때 초기화 해준다 라는 자리이다.

2번째 인자같은경우 우리가 원하는 debounce 와 throttle을 제대로 실행하려면 초기화시켜주면 안되므로 이땐 빈공간으로 해놓는다.

 

컴포넌트를 잘 만들기위해선 꼭 알아야하는 개념이다. 나중에 최적화할때 아주 중요한 부분이라고 한다.