Reactjs에서 디바운싱/스로틀 기술을 사용하여 서버 부하 감소

React.js의 디바운싱 및 제한

디바운싱 및 제한은 빈번한 이벤트(예: 입력, 스크롤, 크기 조정)에 대한 응답으로 함수 실행 빈도를 제어하여 성능을 최적화하는 데 사용되는 기술입니다.

---

1. 디바운싱이란 무엇인가요?

디바운싱은 마지막 호출 이후 특정 시간이 지날 때까지 함수 실행을 지연시킵니다.

사용 사례 예:

• 검색 입력 필드: 키를 누를 때마다 API 호출이 실행되지 않도록 하세요.

React의 디바운싱 예시

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

const DebouncedSearch = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [debouncedValue, setDebouncedValue] = useState('');

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(searchTerm);
    }, 500); // Delay of 500ms

    return () => {
      clearTimeout(handler); // Cleanup on input change
    };
  }, [searchTerm]);

  useEffect(() => {
    if (debouncedValue) {
      console.log('API Call with:', debouncedValue);
      // Make API call here
    }
  }, [debouncedValue]);

  return (
    <input type="text" placeholder="Search..." value="{searchTerm}" onchange="{(e)"> setSearchTerm(e.target.value)}
    />
  );
};

export default DebouncedSearch;

---

2. 스로틀링이란 무엇인가요?

제한 기능을 사용하면 해당 간격 동안 함수가 트리거된 횟수에 관계없이 지정된 시간 간격에 최대 한 번만 함수가 실행됩니다.

사용 사례 예:

• 스크롤 이벤트: 성능 향상을 위해 스크롤 이벤트 중에 트리거되는 함수의 빈도를 제한합니다.

React의 제한 예

import React, { useEffect } from 'react';

const ThrottledScroll = () => {
  useEffect(() => {
    const handleScroll = throttle(() => {
      console.log('Scroll event fired');
    }, 1000); // Execute at most once every 1000ms

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

  return <div>




<hr>

<h3>
  
  
  <strong>3. Using Libraries (Optional)</strong>
</h3>

<p>Instead of implementing custom debounce/throttle, you can use popular libraries like:</p>

<h4>
  
  
  <strong>Lodash</strong>
</h4>

<p>Install:<br>
</p>

<pre class="brush:php;toolbar:false">npm install lodash

사용법:

import { debounce, throttle } from 'lodash';

// Debounce Example
const debouncedFunc = debounce(() => console.log('Debounced!'), 500);

// Throttle Example
const throttledFunc = throttle(() => console.log('Throttled!'), 1000);

반응 활용

설치:

npm install react-use

사용법:

import { useDebounce, useThrottle } from 'react-use';

const Demo = () => {
  const [value, setValue] = useState('');
  const debouncedValue = useDebounce(value, 500);
  const throttledValue = useThrottle(value, 1000);

  useEffect(() => {
    console.log('Debounced:', debouncedValue);
    console.log('Throttled:', throttledValue);
  }, [debouncedValue, throttledValue]);

  return (
    <input value="{value}" onchange="{(e)"> setValue(e.target.value)}
      placeholder="Type something..."
    />
  );
};

export default Demo;

---

주요 차이점

Feature	Debouncing	Throttling
Execution	Executes once after the user stops firing events for a specified time.	Executes at regular intervals during the event.
Use Cases	Search input, resizing, form validation.	Scroll events, button clicks, API polling.
Performance	Reduces the number of function calls.	Limits execution to once per interval.

특징

---

디바운싱

제한 실행

사용자가 지정된 시간 동안 이벤트 발생을 중지한 후 한 번 실행됩니다. 이벤트 기간 동안 정기적으로 실행됩니다.

사용 사례

검색 입력, 크기 조정, 양식 유효성 검사 스크롤 이벤트, 버튼 클릭, API 폴링. 성능 함수 호출 횟수를 줄입니다. 실행을 간격당 한 번으로 제한합니다.

사용 시기