Throttling & Debouncing 두개의 차이점과 어떤것을 어느 상황에 쓰면 좋은지 알아보자!
Throttling
Throttling 이란 주로 모바일 기기에서 많이 사용되는 용어로 성능을 위한 오버클럭(Overclock)이 디바이스에 무리를 주는 것을 방지하기 위해 고의로 성능을 낮추는 조절 방식을 말한다.
scroll이벤트를 사용한다고 했을 때 나는 한번 내렸으니까 한번이겠지?가 아니라 console.log에 찍어보면 몇백번 내렸다고 찍혀있다 이 몇백번의 이벤트가 발생하게 되면 과부하가 올것이다.
그래서 우리는 이를 최적화 해주기 위해 Throttling을 사용합니다.
이 기능은 연이어 발생한 이벤트에 대해 일정한 delay를 포함 시켜, 연속적으로 발생하는 이벤트는 무시하는 방식으로 사용됩니다.
Debouncing
Debounce는 반복적인 동작을 강제적으로 대기하는 것을 말합니다.
무언가를 검색창에 입력을 할때 최적화가 되어있지 않다면 네트워크 탭에 fetch가 모음,자음수대로 업데이트가 일어나기 때문에 우리는 이것을 최적화 해주어야 합니다.
디바운싱이란, 연이어 발생한 이벤트를 하나의 그룹으로 묶어 처리하는 방식으로 주로 그룹에서 마지막, 혹은 처음에 처리된 함수를 처리하는 방식으로 사용됩니다.
const getDebounce = _.debounce((value) => {
void refetch({ search: value, page: 1 });
setKeyword(value);
}, 500);이런식으로 500 ( 0.5초) 마다 입력이 되면 기다리고 0.5초 동안 입력이 되지 않으면 맨 마지막 검색어만 받아와서 내뱉어줍니다. 이렇게 되면 아래 사진같이 하나하나 찍히는게 아니라 맨 마지막 asd~~sfj만 출력이 되겠습니다. 사이트는 한사람이 아닌 수 많은 사람이 이용하기 때문에 이런식으로 최적화를 해주는게 상당히 중요하다고 하네요~!
이 라이브러리는 lodash에서 import 하시면 됩니다.
lodash-debounce
Throttling : 지정한 delay안에 실행된 event는 무시되고 delay가 지났을때 마지막 값만 가져옵니다.(무한스크롤에 좋다)
Debouncing : 지정한 X초안에 이벤트가 발생되면 기다렸다가 X초안에 이벤트가 발생하지 않으면 마지막 값을 가져옵니다.(검색창에 좋다)
