[TIL #42] throttling & debouncing, Lodash 라이브러리

Bora.K | 권보라·2023년 12월 20일

React TIL react-query

TIL

목록 보기

42/51

오늘 한 일

[내배캠] React 심화 주차 강의 복습
[수준별수업] useQuery, useMutation 처리 프로세스

학습 내용

throttling & debouncing

1. throttling & debouncing이란?

짧은 시간 간격으로 연속해서 이벤트가 발생했을 때 과도한 이벤트 핸들러 호출을 방지하는 기법이다. 예를 들어 인스타그램에 좋아요를 누를 때마다 서버에 데이터를 갱신해달라는 요청을 보내면, 엄청난 부하가 발생할 것이다.

(1) Throttling
짧은 시간 간격으로 연속해서 발생한 이벤트를 일정 시간(delay)을 두고 그룹화하여 처음(Leading Edge), 마지막(Trailling Edge), 또는 처음과 마지막(Leading & Trailing Edge) 이벤트 핸들러만 호출하는 것이다.

즉, 실행중인 타이머가 있으면 바로 return해서 종료시키고,
실행중인 타이머가 끝난 후 재요청을 할 수 있다.

  let timerId = null;

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

return (
	<div>
    <button onClick={() => throttle(2000)}>쓰로틀링 버튼</button>
	</div>
)

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

즉, 실행중인 타이머가 있으면 clearTimeout을 통해 기존 타이머를 제거하고
마지막에 요청된 타이머로부터 delay 시간이 지난 후 한 번만 호출한다.

  const debounce = (delay) => {
    if (timerId) {
      // 할당되어 있는 timerId 타이머 제거
      clearTimeout(timerId);
    }
    timerId = setTimeout(() => {
      // timerId에 새로운 타이머 할당
      console.log(`마지막 요청으로부터 ${delay}ms지났으므로 API요청 실행!`);
      timerId = null;
    }, delay);
  };

return (
	<div>
    <button onClick={() => throttle(2000)}>쓰로틀링 버튼</button>
    <button onClick={() => debounce(2000)}>디바운싱 버튼</button>
	</div>
)

(3) 메모리 누수 방지
메모리 누수란 필요하지 않은 메모리를 계속 점유하고 있는 현상으로, 예를 들어 리액트에서 페이지를 이동하면 기존 컴포넌트는 언마운트된다. 그런데 setTimeout을 통해 타이머 동작 중에 페이지를 이동하게 되면 기존 페이지가 언마운트 되었음에도 불구하고 요청된 타이머는 계속 실행하여 메모리를 차지하고 있다.

이러한 메모리 누수를 방지하기 위해 useEffect를 사용하여 언마운트될 때 clearTimeout을 통해 기존 timerId에 해당하는 타이머를 종료시켜줄 수 있다.

  useEffect(() => {
    return () => {
      // 페이지 이동 시 실행
      if (timerId) {
        clearTimeout(timerId);
      }
    };
  }, [timerId]);

2. Lodash 라이브러리

throttling과 debouncing을 해주는 라이브러리

_ 언더바를 통해 import 해온다.

yarn add lodash

Input값 입력 후 2초 뒤에 text가 화면에 렌더링되는 함수

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

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

// useCallback 함수로 감싸준다.
  // 2초 후에 Input의 Value값을 인자로 받아 setSearchText에 넣어준다.
  const handleSearchText = useCallback(
    _.debounce((text) => setSearchText(text), 2000),
    []
  );

  const handleChange = (e) => {
    handleSearchText(e.target.value);
  };

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

export default App;