React(Lodash)에서 Debounce를 사용하는 방법

사용자가 input 필드에 입력하거나 특정 작업을 수행할 때 API에서 요청하는 효율적인 방법은 API와 상호 작용하기 전에 사용자 작업을 완료할 수 있도록 하는 것입니다. 이렇게 하면 UI 코드가 모든 이벤트를 처리할 필요가 없으며 서버로 전송되는 호출 수도 크게 줄어듭니다.

이에 대한 해결책 중 하나는 디바운스/스로틀을 사용하는 것이며 Lodash는 debounce 기능을 제공합니다. Lodash의 디바운스 함수는 전달된 함수 호출을 지연시킵니다. 일부 상황에서는 성능에 도움이 될 수 있습니다.

이 기사에서는 React 앱에서 debounce의 올바른 구현을 살펴볼 것입니다.

우리 앱

검색 입력 필드가 포함되어 있고 사용자가 요청을 입력할 때마다 데이터를 UI에 로드하는 요청이 이루어지는 이 샘플 React 애플리케이션을 살펴보겠습니다.

export default function App() {
  const [users, setUsers] = React.useState([]);

  async function search(value) {
    const res = await fetch(
      // Fake API 
      `https://api.github.com/?search=${value}`
    );
    const body = await res.json();
    return body.results.map((result) => result.name);
  }

  async function handleChange(event) {
    setUsers(await search(event.target.value));
  }

  return (
    <div className="App">
      <input
        type="search"
        placeholder="Enter your search"
        onChange={handleChange}
      />
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.firstname}</li>
        ))}
      </ul>
    </div>
  );
}

위의 코드를 사용하면 사용자가 입력 요소에서 키 입력을 할 때마다 검색 요청이 이루어집니다. 이상적으로는 사용자가 입력을 중지한 경우에만 검색 요청이 이루어지기를 원합니다. 이를 위해 Lodash의 debounce 함수를 사용할 수 있습니다. debounce 함수는 사용자가 미리 정해진 시간 동안 입력을 중지할 때까지 키업 이벤트 처리를 지연시킵니다.

React에서 디바운스 구현하기

npm install lodash

debounce 함수를 만들고 handlechange 내부에서 호출하면 타이머가 각 호출 사이의 간격을 결정하는 디바운스된 함수로 설정됩니다.

import { debounce } from 'lodash';

const handleSearchDebounce = debounce(async (value) => {
    setUser(await search(value));
}, 300);

async function handleChange(event) {
  handleSearchDebounce(event.target.value);
}

접근법 2

첫 번째 방법을 사용하면 모든 렌더링에서 디바운스된 방법의 새 버전이 생성됩니다. 대신 useRef 후크를 사용하여 렌더링 간에 디바운스된 함수를 저장할 수 있습니다.

import { debounce } from 'lodash';

const handleSearchDebounce = React.useRef(
  debounce(async (value) => {
    setUsers(await search(value));
  }, 300)
).current;

/* We can use the `useEffect` hook to cancel the debounced function 
so whenever the component unmounts the search stops running, and
the function gets canceled */
React.useEffect(() => {
  return () => {
    handleSearchDebounce.cancel();
  };
}, [handleSearchDebounce]);

결론

이 기사에서는 Lodash를 사용하여 React에서 debounce 함수를 구현하는 방법을 설명했습니다. 그러나 원하지 않는 경우 프로젝트에서 Lodash의 구현debounce을 사용할 필요가 없습니다. write your own 디바운스 기능을 결정할 수 있으며 일부 다른 라이브러리는 이와 동일한 디바운스 기능을 제공합니다.

👉🏾 Learn more about me

👉🏾

👉🏾 Subscribe to my blog, let's feast