230712 Throttling & Debouncing

Throttling & Debouncing

📌 Throttling & Debouncing?

짧은 시간 간격으로 연속해서 이벤트가 발생했을 때 과도한 이벤트 핸들러 호출을 방지하는 기법이다.

📌 Throttling?

짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위로 그룹화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록 하는 것이다.

📌 Debouncing?

짧은 시간 간격으로 연속해서 이벤트가 발생하면 이벤트 핸들러를 호출하지 않다가 마지막 이벤트로부터 일정 시간이 경과한 후에 한 번만 호출하도록 하는 것이다.

Throttling & Debouncing 코드로 구현하기

1) react-router-dom 패키지 설치

yarn add react-router-dom

2) pages > Home.jsx와 Company.jsx 생성

3) App.jsx 컴포넌트에서 라우터 관련 설정

import "./App.css";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "./pages/Home";
import Company from "./pages/Company";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/company" element={<Company />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

4) Home.jsx에서 Debouncing 예시 구현

import React from "react";

const Home = () => {
  // Throttling과 Debouncing을 제어하는 키
  // timerId를 변화시키면서 다룰 것이기 때문에 let으로 선언
  // (1) timerId의 초기값은 null
  let timerId = null;

  const throttle = (delay) => {};

  // Debouncing : 반복적인 이벤트 이후, delay가 지나면 function
  // 2000(시간)을 받아올 변수 delay 필요
  const debounce = (delay) => {
    // (5) timerId은 null이 아니기 때문에 clearTimeout이 동작함
    if (timerId) {
      // 할당되어 있는 timerId에 해당하는 타이머 제거
      // (6) 다시 setTimeout 재할당
      clearTimeout(timerId);
    }
    // (2) timerId가 null이기 때문에 setTimeout이 동작함
    // (7) 다시 2초가 카운트 됨..!
    // delay만큼 새롭게 setTimeout 해줌
    timerId = setTimeout(() => {
        // (3) 2초 후에 아래 로직 수행 
        // (4) 근데 만약? 2초를 기다리지 못 하고 한 번 더 누른다??? (timerId은 null이 아님)
      console.log(`마지막 요청으로부터 ${delay}ms 지났으므로 API 요청 실행!`);
      timerId = null;
    }, delay);
  };

  return (
    <div
      style={{
        paddingLeft: 20,
        paddingRight: 20,
      }}
    >
      <h1>Button 이벤트 예제</h1>
      {/* Throttling과 Debouncing에는 몇 초를 딜레이 둘 것인지 기준 시간(ms)이 항상 필요함! */}
      <button onClick={() => throttle(2000)}>Throttling 버튼</button>
      <button onClick={() => debounce(2000)}>Debouncing 버튼</button>
    </div>
  );
};

export default Home;

5) Home.jsx에서 Throttling 예시 구현

import React from "react";

const Home = () => {
  let timerId = null;

  // Throttling 함수
  const throttle = (delay) => {
    if (timerId) {
      // timerId가 있으면 바로 함수 종료
      return;
    }
    console.log(`API요청 실행! ${delay}ms 동안 추가 요청은 안 받습니다!`);
    timerId = setTimeout(() => {
      console.log(`${delay}ms 지남 추가 요청 받습니다!`);
      timerId = null;
    }, delay);
  };

  const debounce = (delay) => {
    if (timerId) {
      clearTimeout(timerId);
    }
    timerId = setTimeout(() => {
      console.log(`마지막 요청으로부터 ${delay}ms 지났으므로 API 요청 실행!`);
      timerId = null;
    }, delay);
  };

  return (
    <div
      style={{
        paddingLeft: 20,
        paddingRight: 20,
      }}
    >
      <h1>Button 이벤트 예제</h1>
      {/* Throttling과 Debouncing에는 몇 초를 딜레이 둘 것인지 기준 시간(ms)이 항상 필요함! */}
      <button onClick={() => throttle(2000)}>Throttling 버튼</button>
      <button onClick={() => debounce(2000)}>Debouncing 버튼</button>
    </div>
  );
};

export default Home;

6) 메모리 누수 이슈 해결하기

import React, { useEffect } from "react";
import { useState } from "react";
import { useNavigate } from "react-router-dom";

const Home = () => {
  let timerId = null;
  const [state, setState] = useState(true);
  const navigate = useNavigate();

  // Throttling 버튼을 누르고 바로 페이지 이동을 하면??
  // 이전 페이지에서 어떠한 요청을 하고 있는 것이 현재 페이지에서도 영향을 끼치고 있음 -> 메모리 누수에 해당
  // useEffect의 return문으로 해결하기!
  useEffect(() => {
    return () => {
      // 언마운트 시 (Home이라는 컴포넌트가 사라질 때)
      // timerId가 존재한다면, clearTimeout을 통해서 timerId를 없애달라! (메모리에서 제거)
      if (timerId) {
        clearTimeout(timerId);
      }
    };
  }, []);

  const throttle = (delay) => {
    if (timerId) {
      return;
    }
    // 임의의 state를 만들어서 리랜더링 시켜줌 -> timerId는 무조건 null -> Throttling 적상 작동 X
    setState(!state);
    console.log(`API요청 실행! ${delay}ms 동안 추가 요청은 안 받습니다!`);
    timerId = setTimeout(() => {
      console.log(`${delay}ms 지남 추가 요청 받습니다!`);
      timerId = null;
    }, delay);
  };

  const debounce = (delay) => {
    if (timerId) {
      clearTimeout(timerId);
    }
    timerId = setTimeout(() => {
      console.log(`마지막 요청으로부터 ${delay}ms 지났으므로 API 요청 실행!`);
      timerId = null;
    }, delay);
  };

  return (
    <div
      style={{
        paddingLeft: 20,
        paddingRight: 20,
      }}
    >
      <h1>Button 이벤트 예제</h1>
      <button onClick={() => throttle(2000)}>Throttling 버튼</button>
      <button onClick={() => debounce(2000)}>Debouncing 버튼</button>
      <div>
        <button
          onClick={() => {
            navigate("/company");
          }}
        >
          페이지 이동
        </button>
      </div>
    </div>
  );
};

export default Home;

lodash 적용

1) App.js 세팅하기

import "./App.css";
import { useState } from "react";

function App() {
  const [searchText, setSearchText] = useState("");
  const [inputText, setInputText] = useState("");

  const handleSearchText = () => {};

  // 공통함수
  const handleChange = (event) => {
    setInputText(event.target.value);
    handleSearchText();
  };

  return (
    <div
      style={{
        paddingLeft: "20px",
        paddingRight: "20px",
      }}
    >
      <h1>디바운싱 예제</h1>
      <input
        placeholder="입력값을 넣고 디바운싱 테스트를 해보세요."
        style={{ width: "300px" }}
        type="text"
        onChange={handleChange}
      />
      <p> Search Text : {searchText}</p>
      <p> Input Text : {inputText}</p>
    </div>
  );
}

export default App;

2) lodash 패키지 설치

yarn add lodash

3) lodash와 useCallback 적용하기

import "./App.css";
import { useState, useCallback } from "react";
import _ from "lodash";

function App() {
  const [searchText, setSearchText] = useState("");
  const [inputText, setInputText] = useState("");

  // lodash와 useCallback 적용하기
  const handleSearchText = useCallback(
    _.debounce((text) => {
      setSearchText(text);
    }, 2000)
  );

  // 공통함수
  const handleChange = (event) => {
    setInputText(event.target.value);
    handleSearchText(event.target.value);
  };

  return (
    <div
      style={{
        paddingLeft: "20px",
        paddingRight: "20px",
      }}
    >
      <h1>디바운싱 예제</h1>
      <input
        placeholder="입력값을 넣고 디바운싱 테스트를 해보세요."
        style={{ width: "300px" }}
        type="text"
        onChange={handleChange}
      />
      <p> Search Text : {searchText}</p>
      <p> Input Text : {inputText}</p>
    </div>
  );
}

export default App;

4) custom debounce 만들기

import "./App.css";
import { useState, useCallback } from "react";
import _ from "lodash";

function App() {
  const [searchText, setSearchText] = useState("");
  const [inputText, setInputText] = useState("");

  // custom debounce 만들기
  const debounce = (callback, delay) => {
    let timerId = null;
    return (...args) => {
      if (timerId) clearTimeout(timerId);
      timerId = setTimeout(() => {
        callback(...args);
      }, delay);
    };
  };
  
  // useCallback을 통해 메모이제이션 해주기
  const handleSearchText = useCallback(
    debounce((text) => {
      setSearchText(text);
    }, 2000),
    []
  );

  // 공통함수
  const handleChange = (event) => {
    setInputText(event.target.value);
    handleSearchText(event.target.value);
  };

  return (
    <div
      style={{
        paddingLeft: "20px",
        paddingRight: "20px",
      }}
    >
      <h1>디바운싱 예제</h1>
      <input
        placeholder="입력값을 넣고 디바운싱 테스트를 해보세요."
        style={{ width: "300px" }}
        type="text"
        onChange={handleChange}
      />
      <p> Search Text : {searchText}</p>
      <p> Input Text : {inputText}</p>
    </div>
  );
}

export default App;