# debounce 사용하기

react에서 debounce 사용 하는 방법에 대해 알아보겠습니다.

# debounce란?

  • debounce는 dom 스크롤 또는 숫자 입력에 따른 api값 호출 같이 이벤트가 과도하게 많은 호출할 하는 경우 지정한 시간 동안 호출네 제약을 걸어 api 호출 과부하를 방지하는 기술입니다.
  • debounce는 호출시 지정된 시간 이후 호출된 가장 마지막 이벤트만 실행되는 기술입니다. (지정된 시간이 0.5초이고, 0.5초내에 5번이 호출 되었다면 가장 마지막에 호출된 5번째 api만 서버로 호출한다는 뜻입니다)

# react에서 사용하기

  • lodash라는 라이브러리의 debounce를 사용합니다.
  • react에서 lodash를 사용 할때 유의할 점이 있습니다. 리렌더링 되는 컴포넌트 내에 debounce를 정의한 함수가 있고, 해당 컴포넌트가 state에 따라 리렌더링이 된다면 debounce 함수도 재생성되면서 debounce가 초기화 된다는 점입니다.
  • 이 버그를 방지하기 위해서는 useCallback을 사용합니다. useCallback을 이용하여 state가 바뀜에도 debounce함수는 재생성이 되지 않도록 하여 debounce가 초기화 되지 않도록 막습니다. 아래 예시 코드로 자세히 알아보겠습니다.

# 예시 코드

import React, { useState, useCallback } from 'react';
import { debounce } from 'lodash';
const Index = () => {
  const [price, setPrice] = useState(0);

  const changePrice = e => {
		const { value } = e.currentTarget || e.target;
    // 1. setState를 하면서 컴포넌트가 리렌더링 됩니다.
		setPrice(value);
		const params = { price: value };
		handlePrice(params);
	};

  // 2. useCallback을 쓰고 price를 구독하지 않기 때문에 price가 바뀜에 따라 리렌더링 되어도 handlePrice는 재생성되지 않습니다.
	const handlePrice = useCallback(
		debounce(async params => {
			try {
				const response = await api({ params });
				console.log(response);
			} catch (e) {
				console.log('api 호출 실패');
			}
      // 3. 0.5초안에 호출된 가장 마지막 api만 서버로 호출합니다.
		}, 500),
		[],
	);

  return (
    ...
  )
}

export default Index;
#react
노경환
이 글이 도움이 되셨다면! 깃헙 스타 부탁드립니다 😊😄
최근변경일: 1/3/2023, 11:23:43 PM