디바운스(Debounce)와 쓰로틀(Throttle)은 이벤트 핸들러가 너무 자주 실행되지 않도록 조절하는 기법입니다.
디바운스
이벤트가 연속적으로 발생할 때, 마지막 이벤트가 발생한 후 일정 시간이 지나야 이벤트 핸들러가 실행되는 방식입니다.
이를 통해 불필요하게 많은 이벤트 호출을 방지할 수 있습니다. 예를 들어, 검색창에 사용자가 키를 입력할 때마다 검색 요청을 보내면 부하가 지나치게 커지기 때문에, 사용자가 입력을 멈춘 후 일정 시간이 지나면 검색 요청을 보내는 방식으로 디바운스를 적용할 수 있습니다.
다음은 제 이전 프로젝트 중 검색어를 통한 필터에 사용되었던 디바운스 코드 중 일부입니다.
setTimeout(() => {
emit('update:value', target.value)
}, 500)이를 통해 검색어가 바뀔 때마다 API를 호출하지 않고, 0.5초 이내로 추가적인 입력이 없을 때에만 API 호출을 발생시킵니다.
쓰로틀
쓰로틀은 일정 시간 간격 동안 발생한 이벤트 중 첫 번째 또는 마지막 이벤트만 처리하는 방식입니다.
즉, 이벤트가 계속해서 발생하더라도 설정된 시간 동안은 한 번만 이벤트 핸들러가 실행됩니다. 예를 들어, 사용자가 연속 클릭을 한다면 클릭할 때마다 이벤트가 발생되는데, 이를 매번 처리하면 부하가 불필요하게 커지니, 쓰로틀을 적용해 일정 간격 내 한 번만 처리하게 할 수 있습니다.
무한 스크롤을 구현한다면?
무한 스크롤 구현 시에는 쓰로틀을 사용하는 것이 더 적합합니다.
스크롤은 연속적인 동작이며 사용자가 페이지 하단에 도달했을 때 즉각적인 반응을 기대합니다.
먼저, 쓰로틀은 스크롤이 하단에 위치하게 된 순간 즉시 추가 데이터 요청을 수행하고, 추가적인 트리거가 발생되더라도 이전의 데이터 요청이 완료되기 전까지 다음 데이터를 불러오지 않습니다. 이를 통해 사용자에게 더 자연스러운 스크롤 경험을 제공할 수 있습니다.
반면, 디바운스를 사용할 경우, 사용자가 반복적으로 스크롤한다면 마지막 스크롤이 멈춘 후에야 데이터를 불러오기 시작하므로 지연이 발생할 수 있습니다.
