지난 글에서 프리온보딩 인턴쉽에서 3주차 과제를 어떻게 구현했는지 설명헀는데요. 과제의 내용 중 ‘API 요청 횟수를 최적화’하기 위해 디바운싱 기법을 활용했습니다. 사실 과제 수행 당시, 팀과제와 개인과제를 3일 반 만에 해내야하는 아주 촉박한 일정이었기 때문에 디바운싱에 대해 완벽히 이해하지 못한 채 구현했습니다.

그래서 오늘은 디바운싱(Debounce) 그리고 쓰로틀링(Throttle) 기법의 개념을 완벽히 이해하는 시간을 가져보려 합니다.

성능!

결론부터 말하자면 웹 프론트엔드 영역에 있어서 성능 최적화가 매우 중요한 이슈이기 때문에, 이러한 성능 최적화에 사용되는 기법인 디바운싱과 쓰로틀링을 알아두어야 합니다.

웹 어플리케이션의 성능은 여러 요소가 좌지우지하지만, 그 중에서도 사용자와의 상호작용(예: 스크롤, 클릭, 키보드 입력 등)에 대한 이벤트를 효율적으로 처리하기 위해 디바운스와 쓰로틀링이 사용됩니다. 이 때, 발생한 이벤트는 자바스크립트의 Event Listener에 의해 처리되는데, 이러한 이벤트 리스너가 얼마나 성능에 영향을 미칠 수 있는지는 아래 CodeSpen 예제를 통해 확인할 수 있습니다.

https://codepen.io/tutsplus/pen/PoWrPNE

위 예제에서 확인할 수 있듯이, 스크롤을 잠깐만 움직여도 스크롤 이벤트의 발생 횟수가 50회, 100회는 가뿐히 넘는 것을 볼 수 있습니다. 만약, 스크롤 이벤트 1회당 API 요청이나 고비용의 연산을 수행한다면 어플리케이션 성능에 부정적인 영향을 줄 수 있겠죠?

이러한 상황에서 이벤트 호출 빈도를 제어하여 성능을 최적화하는 디바운싱과 쓰로틀링 기법이 무엇인지, 두 기법을 비교하여 이해해보도록 하겠습니다.

디바운싱과 쓰로틀링 모두 이벤트 실행 빈도를 제어하는 기법이지만, 각 작동 방식과 사용 사례는 다릅니다.

특정 이벤트가 연속적으로 발생했을 때, 디바운싱은 일정 시간동안 발생한 연속적인 이벤트들을 ‘그룹화’하여 처리하는 반면, 쓰로틀링은 ‘일정한 빈도’로 이벤트를 처리합니다.

예를 들어, 250ms(밀리초)를 타이머로 디바운싱과 쓰로틀링 기법을 스크롤 이벤트에 적용한다고 해봅시다. 여기서 디바운싱을 적용하면 250ms 동안 스크롤 이벤트가 발생하지 않으면 함수가 호출되고, 쓰로틀링을 적용하면 사용자가 스크롤을 움직이는 동안 250ms마다 함수가 호출됩니다.

위에서 설명한 예시에서 디바운싱과 쓰로틀링이 각각 연속된 이벤트를 어떠한 방식으로 제어하는지 아래 이미지를 통해 확인해볼까요?

정리하자면,

• Debounce : 사용자가 특정 시간 동안 이벤트를 수행하지 않았을 때 함수를 호출
• Throttle : 사용자가 이벤트를 수행하는 동안 지정된 시간 간격으로 함수를 호출

원래 계획은 debounce와 throttle 둘을 비교하고 각각 리액트로 구현한 코드를 한 글에 담으려고 했는데, 생각보다 debounce 한 개도 직접 리액트로 구현해보니 그 과정이 길어졌습니다. 그래서 내용을 분리하여 debounce와 throttle의 개념, debounce 구현하기, throttle 구현하기의 세 글로 나눠 글을 쓸 예정인데요.

debounce를 구현하는 과정을 통해 컴포넌트의 재렌더링, 클로저, 컴포넌트의 성능 최적화 등 다양한 것을 얻어가실 수 있으니, 다음 글도 이어서 봐주시길 바랍니다! (링크)

https://onlydev.tistory.com/151

https://webdesign.tutsplus.com/javascript-debounce-and-throttle--cms-36783t

https://velog.io/@soulee__/Javascript-쓰로틀링-디바운싱-throttle-debounce