[React] 쓰로틀링(throttling) & 디바운싱(debouncing)

리액트 강의를 듣다보면 꼭 나오는 쓰로틀링과 디바운싱에 대해 알아보자.

쓰로틀링 (Throttling)

쓰로틀링은 특정 동작이 주어진 시간 동안 최대 한 번만 발생하도록 하는 기술.
예를 들어, 사용자의 스크롤 아밴트에 대응해 특정 함수를 호출할 때, 쓰로틀링을 사용하면 연속적인 스크롤에 대한 함수 호출을 제어할 수 있다.

import { throttle } from 'lodash';

const throttledFunction = throttle(() => {
  console.log('쓰로틀링 중!');
}, 1000); // 1000ms(1초) 단위로 쓰로틀링

window.addEventListener('scroll', throttledFunction);

scroll 이벤트가 발생하면 throttledFunction 함수가 실행되는 소스이다.

여기서 throttle을 사용해서 1000ms 단위로 쓰로틀링 하도록 제어한 것을 볼 수 있다. 그러면 사용자가 1000ms 안에 몇번을 스크롤해도 동작은 1번만 하게 된다.

문득 이 기술을 보니, 전에 무한스크롤 구현했을 때 api 호출을 여러번했던 경험이 있었는데 그때 쓰로틀링을 사용했다면 불필요한 추가 콜을 안하도록 방지할 수 있었을텐데 하는 아쉬움이 들었다.

디바운싱 (Debouncing)

디바운싱은 연이어 발생하는 이벤트 중 마지막 이벤트에 대해서만 함수를 호출하는 기술. 예를 들어, 검색어 입력창에서 사용자가 타이핑할 때, 디바운싱을 사용하면 마지막 입력 이벤트 후에만 실제 검색을 실행할 수 있다.

import { debounce } from 'lodash';

const debouncedFunction = debounce(() => {
  console.log('디바운싱 중!');
}, 1000); // 1000ms(1초) 딜레이 후에 디바운싱

inputElement.addEventListener('input', debouncedFunction);

위 코드는 input에 대한 이벤트를 감지해서 debouncedFunction가 실행되는 소스이다.

사용자의 텍스트 입력할 때마다 함수가 호출된다. 그러다 더 이상 입력 이벤트가 감지되지 않으면 1000ms를 기다린 뒤 콘솔 내용이 출력된다.

어떻게 보면 좋은것 같지만 이벤트를 계속 호출하기 때문에 성능적으로는 좋지 않을 것 같단 생각이 들기도 하고... 🤔 쓰로틀링에 비해 디바운싱은 좀 많은 생각이 들게 되는 것 같다.