React : 디바운싱(debouncing)

디바운싱(debouncing)은 연이어 호출되는 함수들 중 마지막 함수만 호출하도록 제어하는 기술입니다. 특히, 이벤트 핸들러 함수에 적용하여 이벤트의 연속적인 발생으로 인해 발생할 수 있는 성능 저하를 방지할 수 있습니다.

디바운싱은 입력 창에서 텍스트를 입력하는 경우 유용하게 쓰일 수 있습니다. 사용자가 텍스트를 입력하면, 입력마다 서버에 요청을 보내게 되면 성능이 저하될 수 있습니다. 이때 디바운싱을 사용하여 일정 시간(예를 들어, 500ms)동안 다음 입력이 들어오지 않으면 마지막 입력을 서버에 전송하도록 하면, 사용자가 입력하는 동안 서버에 요청이 계속해서 보내지 않으므로 성능 저하를 방지할 수 있습니다.

디바운싱을 구현하는 방법은 타이머를 활용하는 것이 일반적입니다. 이를 통해 입력 이벤트 발생 후, 일정 시간 동안 새로운 입력이 들어오지 않으면 마지막 입력을 처리합니다.

다음은 디바운싱을 구현하는 예제 코드입니다.

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

const DebounceInput = () => {
  const [inputValue, setInputValue] = useState('');

  useEffect(() => {
    const timerId = setTimeout(() => {
      // 마지막 입력을 처리하는 로직
      console.log('processing', inputValue);
    }, 500);

    // 타이머를 취소하는 함수를 반환하여 클린업 함수로 등록
    return () => clearTimeout(timerId);
  }, [inputValue]);

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <input type="text" value={inputValue} onChange={handleChange} />
  );
};

export default DebounceInput;

위 코드에서 useEffect 훅을 사용하여 inputValue의 변경을 감지합니다. useEffect 함수의 콜백 함수에서는 타이머를 생성하여, 500ms 이내에 다음 입력이 들어오지 않으면 처리 로직을 실행합니다. 이때, useEffect 함수의 반환값으로 타이머를 취소하는 함수를 등록하여 클린업 로직으로 활용합니다.

handleChange 함수는 입력창의 입력값이 변경될 때마다 호출되며, inputValue의 상태를 업데이트합니다. 이렇게 되면 useEffect 함수가 새로운 값을 감지하여 타이머를 재설정합니다.

이와 같은 방식으로 디바운싱을 구현하면, 연속적인 이벤트 발생으로 인한 성능 저하를 방지할 수 있습니다.

이를 통해 입력 이벤트가 연속적으로 발생하더라도, 마지막 입력 이후에 일정 시간이 지난 후에만 처리 로직을 실행하므로, 불필요한 처리를 방지할 수 있습니다. 디바운싱은 성능 개선을 위해 필요한 기술이며, 리액트에서 이벤트 처리와 상태 관리를 함께 사용할 때 특히 유용하게 쓰일 수 있습니다.