React-throttle

 

설명

Throttle는 성능 최적화를 위해 자주 사용되는 기법으로, 일정 시간 내에 함수 호출 횟수를 제한하는 데 사용됩니다.

주로 스크롤, 윈도우 리사이즈, 버튼 클릭 등 빈번한 이벤트 핸들링에서 과도한 함수 호출을 방지하는 데 유용합니다.

기본 동작 원리

Throttle의 기본 원리는 주어진 시간 간격(delay) 내에서 한 번만 함수를 실행하게 하는 것입니다. 예를 들어, 스크롤 이벤트가 1초에 100번 발생해도, Throttle을 사용하면 지정된 시간 간격(예: 200ms)마다 한 번만 해당 이벤트 핸들러가 호출되도록 제한할 수 있습니다.

 

Throttle vs Debounce

• Throttle: 일정한 간격으로 함수를 실행합니다. 주기적으로 실행되므로 이벤트 발생 간격이 불규칙해도 실행 시점이 일정하게 유지됩니다.
• Debounce: 이벤트가 끝날 때까지 함수를 지연시키고, 이벤트가 일정 시간 동안 발생하지 않으면 한 번만 실행됩니다. 주로 사용자 입력이 끝난 후에 함수가 호출되도록 할 때 사용됩니다.

React 에서 Throttle 사용한 코드

const lastRun = useRef(Date.now());

const handleClick = () => {
	const time = Data.now() - lastRun.current;
	if(time >= 1000) {
		const result = hackLottoNumbers();
		setLottoNumbers(result);
		lastRun.current = Data.now();
	}
}

// 쓰로틀링

import { useRef } from "react";

export const useThrottle = (callback, delay) => {
	const lastRun = useRef(Date.now());

	return () => {
		const time = Date.now() - lastRun.current;
		if(time >= delay) {
			callback();
			lastRun.current = Date.now();
		}
	}
}

const handleClick = useThrottle(() => {
	const result = hackLottoNumbers();
	setLottoNumbers(result);
}, 1000)

 

Throttle을 위한 외부 라이브러리 사용

Throttle 함수는 직접 구현할 수 있지만, 이미 검증된 라이브러리를 사용하는 것이 실수를 줄이고 더 많은 기능을 제공할 수 있습니다.

예를 들어, Lodash의 throttle 함수는 많은 개발자들에게 사랑받고 있습니다.

 

설치

npm install lodash

 

코드

import React, { useEffect } from "react";
import throttle from "lodash/throttle";

const ScrollComponent = () => {
  useEffect(() => {
    const handleScroll = throttle(() => {
      console.log("Scroll event triggered!");
    }, 200);

    window.addEventListener("scroll", handleScroll);

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

  return <div style={{ height: "1500px" }}>Scroll down to see throttle in action.</div>;
};

export default ScrollComponent;