[React] 쓰로틀링과 디바운싱

사용이유

쓰로틀링과 디바운싱은 리소스 사용을 줄이고 성능을 최적화하는 데 도움이 됩니다. 특히 이벤트 핸들러가 많이 호출되는 경우, 이를 제어하여 불필요한 작업을 줄일 수 있습니다. 

 

 

미리보기

 

 

준비물

- 라이브러리 설치

yarn add lodash    // react
yarn add @types/lodash  // typescript

 

 

 

코드

import { debounce, throttle } from "lodash";
import React, { useState } from "react";

const Example = () => {
  const [inputValue, setInputValue] = useState("");
  const [throttleValue, setThrottleValue] = useState("");
  const [debounceValue, setDebounceValue] = useState("");

  // 스로틀링 함수
  const handleThrottle = throttle((value: string) => {
    setThrottleValue(value);
  }, 1000);

  // 디바운싱 함수
  const handleDebounce = debounce((value: string) => {
    setDebounceValue(value);
  }, 1000);

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { value } = event.target;
    setInputValue(value);

    // 스로틀링 함수 호출
    handleThrottle(value);

    // 디바운싱 함수 호출
    handleDebounce(value);
  };

  return (
    <div>
      <h1>스로틀링과 디바운싱</h1>
      <input
        type="text"
        placeholder="입력하시오..."
        value={inputValue}
        onChange={handleInputChange}
      />
      <div>
        <h2>Throttle Result (1초당 1글자):</h2>
        <p>{throttleValue}</p>
      </div>
      <div>
        <h2>Debounce Result (타이핑 종료하고 1초 후):</h2>
        <p>{debounceValue}</p>
      </div>
    </div>
  );
};
export default Example;

- 쓰로틀링은 특정 이벤트가 발생하면 일정 시간 동안 해당 이벤트 핸들러가 호출되지 않고, 주기적으로 이벤트 핸들러가 호출됩니다.

- 디바운싱은 이벤트 핸들러가 마지막 이벤트 발생 이후 일정 시간이 지난 후에 호출되도록 하는 기술입니다.

 

 

 

실사용

 

- useState 훅을 사용하여 사용자의 닉네임의 길이를 15까지 제한 시켰는데..

간혹가다 15를 넘어 16까지 증가되는 현상이 발생했다.

-삽질 결과 해답을 못찾아서 임시방편으로 debouncing을 사용하였다.

 

 

  useEffect(() => {
    // 디바운싱 함수 호출
    if (nickname.length > MAX_NICKNAME_LENGTH) {
      handleDebounce(nickname);
    }

const handleDebounce = debounce((nickname: string) => {
    setNickname((prevNickname) => prevNickname.slice(0, -1));
  }, 10);

-  만약 16자가 입력되면 10/1000 초 후에 현재 닉네임에서 마지막 인덱스에 해당하는 원소를 삭제한다.

- 16자가 -> 15자로 짧은 시간 후에 변경된다.

- 물론, 근본적인 해결이 좋았겠지만, 결국 문제가 해결되어서 다행이다.