React Debouncing

디바운싱 (Debouncing)?

디바운싱은 특정 함수가 여러 번 빠르게 호출될 때, 그 호출을 일정 시간 동안 지연시키는 기술입니다. 해당 함수는 마지막으로 호출된 이후에 일정한 시간이 경과해야만 다시 호출될 수 있습니다.

예를 들어, 사용자가 입력 필드에 타이핑을 할 때마다 데이터를 서버에 요청하는 상황을 생각했을때, 빠르게 타이핑을 하면 매 타이핑마다 서버 요청이 발생합니다. 이럴 때 디바운싱을 사용하면 사용자가 타이핑을 중단하고 일정 시간 동안 아무런 입력이 없을 때만 서버 요청을 보내게 할 수 있습니다.

리액트에서의 디바운싱 구현

React에서는 주로 외부 라이브러리를 사용하거나 직접 구현하는 방식을 사용합니다. lodash의 debounce 함수를 사용하는 것이 흔한 방법입니다.

아래는 lodash를 사용하여 디바운싱을 구현하는 간단한 예제입니다:

import React, { useState } from 'react';
import { debounce } from 'lodash';

function SearchComponent() {
  const [query, setQuery] = useState('');

  const handleInputChange = (e) => {
    setQuery(e.target.value);
    debouncedRequest(e.target.value);
  }

  const debouncedRequest = debounce((value) => {
    // 여기에 서버 요청 또는 원하는 로직을 넣어줌.
    console.log('Sending request with value:', value);
  }, 500);  // 500ms 동안 디바운싱

  return <input type="text" value={query} onChange={handleInputChange} />;
}

export default SearchComponent;

결론

디바운싱을 활용하면 불필요한 호출이나 연산을 줄이고 성능을 향상시킬 수 있음