Throttling, Debouncing

이대현·2024년 6월 18일

Javascript

목록 보기

3/4

쓰로틀링(Throttling)과 디바운싱(Debouncing)은 두 가지 모두 웹 개발에서 이벤트 처리 성능을 최적화하기 위한 기술입니다. 특히, 사용자가 빠르게 같은 이벤트를 여러 번 트리거하는 경우 성능 문제를 방지하기 위해 사용됩니다.

쓰로틀링(Throttling)

쓰로틀링은 이벤트가 일정한 간격으로만 발생하도록 제한하는 방식입니다. 특정 시간 동안 여러 번의 이벤트 호출이 일어나더라도, 쓰로틀링은 설정된 시간 간격 내에 한 번만 함수가 실행되도록 합니다.

주 사용 예:

스크롤 이벤트:
- 웹 페이지에서 사용자가 스크롤할 때 자주 발생하는 이벤트를 일정한 시간 간격으로만 처리하여 성능을 최적화합니다.
윈도우 리사이즈 이벤트:
- 창 크기를 조정할 때 발생하는 이벤트를 주기적으로 처리하여 레이아웃 재계산 등 무거운 작업을 줄입니다.
레이팅 버튼:
- 사용자가 별점이나 평가 버튼을 연속적으로 클릭할 때 이를 쓰로틀링하여 서버로의 요청 빈도를 낮추고, 서버의 부담을 줄입니다.
게임 엔진:
- 주기적으로 화면을 업데이트하는 게임 엔진에서도 프레임 업데이트 주기를 조절하여 성능을 유지합니다.

구현 방법:

import React, { useState, useCallback, useRef } from 'react';

// 쓰로틀링 함수
const useThrottle = (func, delay) => {
  //여기서는 useRef를 써줘야한다 useState를 사용할 경우
  //useThrottle을 호출할때마다 초기화해서 lastCall값이 
  //매번 0으로 초기화되는데 useRef로 관리하면 컴포넌트의
  //생명주기 전체에 걸쳐  동일한 참조값을 유지하기 때문에 상태변경이 추적된다.
	const lastCallRef = useRef(0)
    
  return useCallback((...args) => {
    const now = new Date().getTime();
    if (now - lastCallRef.current < delay) {
      return;
    }
    lastCallRef.current = now
    return func(...args);
  }, [delay, func]);
};

const ThrottledButtonComponent = () => {
  const [clickCount, setClickCount] = useState(0);

  // 서버에 요청 보내는 함수 (예제에서는 클릭 카운트를 올리는 함수로 대체합니다)
  const sendRequest = useThrottle(() => {
    setClickCount(prevCount => prevCount + 1);
    console.log("서버에 요청 보내기");
  }, 2000); // 2초 간격으로 제한

  return (
    <div>
      <button onClick={sendRequest}>
        서버에 요청 보내기
      </button>
      <p>클릭 횟수: {clickCount}</p>
    </div>
  );
};

export default ThrottledButtonComponent;

디바운싱(Debouncing)

디바운싱은 일정 시간 동안 이벤트가 발생하지 않을 때까지 함수를 지연시키는 방식입니다. 이는 사용자가 입력을 멈출 때까지 함수 호출을 지연시키는 것입니다. 만약 함수 호출이 지연 중에 다시 이벤트가 발생하면, 이전 지연 호출을 취소하고 다시 지연을 시작합니다.

주 사용 예:

실시간 검색 입력:
- 사용자가 입력한 검색어를 일정 시간 동안 입력이 없을 때만 서버에 보내어 검색 결과를 업데이트합니다. 이 방식은 API 호출을 줄이는 데 유용합니다.
폼 유효성 검사:
- 사용자가 폼을 입력하는 동안 연속적인 유효성 검사를 방지하고, 입력이 끝난 후에만 유효성을 검사합니다.
자동 저장 기능:
- 사용자가 글을 작성할 때, 마지막 입력 후 일정 시간이 지난 후에만 내용을 저장하여 성능을 최적화합니다.
창 크기 조정 후 작업:
- 사용자가 창 크기를 조정하고 멈춘 후 일정 시간이 지난 후에 레이아웃을 재계산하거나 특정 작업을 수행합니다

구현 방법:

import React, { useState, useEffect, useCallback } from 'react';

const useDebounce = (func, delay) => {
  let timeoutId;

  return (...args) => {
    if (timeoutId) {
      clearTimeout(timeoutId);
    }
    timeoutId = setTimeout(() => {
      func(...args);
    }, delay);
  };
};

const DebouncedInputComponent = () => {
  const [text, setText] = useState('');
  const [debouncedText, setDebouncedText] = useState('');

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

  const handleDebouncedChange = useDebounce((value) => {
    setDebouncedText(value);
  }, 300);

  useEffect(() => {
    handleDebouncedChange(text);
  }, [text, handleDebouncedChange]);

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

export default DebouncedInputComponent;