TIL- Throttling 과 Debouncing

오늘은 Throttling과 Debouncing 에 대해 정리해보았다.

---

먼저 두 기술에 대해 간단하게 알아보면
Throttling은 이벤트 핸들러가 일정한 시간 간격으로 호출되도록 제한하는 것이며, Debouncing은 이벤트 핸들러의 호출을 일정 시간 동안 지연시키는 것이다.
Throttling은 일정한 주기로 이벤트를 처리하는 데 사용되며, Debouncing은 연속적인 이벤트에서 발생하는 중복 처리를 방지하는 데 사용된다.

예제를 통해 더 자세히 알아보자.

Throttling 예제

import React, { useState, useEffect } from 'react';
import { throttle } from 'lodash';

const ThrottledComponent = () => {
  const [position, setPosition] = useState(window.scrollY);

  const handleScroll = throttle(() => {
    setPosition(window.scrollY);
  }, 100);

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);

    return () => window.removeEventListener('scroll', handleScroll);
  }, [handleScroll]);

  return <div>Scroll Position: {position}</div>;
};

위 예제는 스크롤 이벤트가 발생하면, throttle에 의해 제어된 handleScroll 함수는 직전 호출로부터 최소 100밀리초가 지난 후에만 다시 호출된다. 따라서 사용자가 스크롤을 계속하더라도, 실제로 setPosition(window.scrollY)가 실행되어 상태를 업데이트하고 컴포넌트를 리렌더링하는 것은 100밀리초마다 한 번씩이다.

Debouncing 예제

import React, { useState, useEffect } from 'react';
import { debounce } from 'lodash';

const DebouncedComponent = () => {
  const [value, setValue] = useState('');
  const [debouncedValue, setDebouncedValue] = useState(value);

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  useEffect(() => {
    const handler = debounce(() => setDebouncedValue(value), 300);

    handler();

    return () => {
      handler.cancel();
    };
  }, [value]);

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      <p>Debounced Value: {debouncedValue}</p>
    </div>
  );
};

이 예제에서는 사용자가 입력을 멈춘 후 지정된 시간(여기서는 300밀리초)이 지나기 전까지는 입력 값을 최종적으로 업데이트하지 않는다. 이렇게 하면 사용자가 입력하는 동안에는 상태 업데이트가 지연되고, 타이핑을 멈춘 후에만 최종 입력 값이 상태에 반영되어 리렌더링이 일어난다. 이 기법은 불필요한 상태 업데이트와 연산을 줄여 성능을 향상시키는 데 도움이 된다.