React 개발자로서 우리는 여러 개의 빠른 상태 변경을 API와 동기화해야 하는 시나리오에 자주 직면합니다. 모든 작은 변경 사항에 대해 API 호출을 수행하는 것은 비효율적일 수 있으며 클라이언트와 서버 모두에 부담을 줄 수 있습니다. 이것이 디바운싱과 영리한 상태 관리가 작용하는 곳입니다. 이 기사에서는 페이로드를 병합하고 API 호출을 디바운싱하여 병렬 API 업데이트 호출을 캡처하는 사용자 정의 React 후크를 구축합니다.

문제

사용자가 설정이나 기본 설정을 조정할 수 있는 입력 필드를 상상해 보세요. 각 키 입력이나 조정은 API 호출을 트리거하여 새 상태를 저장할 수 있습니다. 사용자가 빠르게 연속해서 여러 가지 변경을 수행하면 API 요청이 급증할 수 있습니다.

• 네트워크 리소스를 비효율적으로 사용합니다.
• 잠재적인 경쟁 조건.
• 서버에 불필요한 부하가 걸립니다.

디바운싱 입력

디바운싱은 함수가 실행될 수 있는 속도를 제한하는 데 사용되는 기술입니다. 함수를 즉시 호출하는 대신, 함수를 실행하기 전에 일정 기간 동안 활동이 없을 때까지 기다립니다. 지연 시간이 끝나기 전에 다른 전화가 오면 타이머가 재설정됩니다.

디바운싱을 사용하는 이유는 무엇입니까?

• 성능 개선: 불필요한 API 호출 수를 줄입니다.
• 리소스 최적화: 서버 부하 및 네트워크 사용량을 최소화합니다.
• 향상된 사용자 경험: 신속하고 연속적인 호출로 인한 지연 및 잠재적인 오류를 방지합니다.

useRef의 역할

React에서 useRef는 다시 렌더링을 트리거하지 않고도 렌더링 간에 변경 가능한 값을 유지할 수 있는 후크입니다. 본질적으로 변경 가능한 값을 보유하는 컨테이너입니다.

여기서 useRef를 사용하는 이유는 무엇입니까?

• 누적 업데이트 유지: 재렌더링을 유발하지 않고 렌더링 간에 누적된 업데이트를 추적해야 합니다.
• 변경 가능한 현재 값에 액세스: useRef는 읽고 쓸 수 있는 .current 속성을 제공합니다.

useDebouncedUpdate 후크

코드를 자세히 살펴보고 모든 것이 어떻게 결합되는지 이해해 보겠습니다.

import { debounce } from "@mui/material";
import { useCallback, useEffect, useRef } from "react";

type DebouncedUpdateParams = {
  id: string;
  params: Record;
};

function useDebouncedUpdate( apiUpdate: (params: DebouncedUpdateParams) => void,
  delay: number = 300, ) {
  const accumulatedUpdates = useRef(null);

  const processUpdates = useRef(
    debounce(() => {
      if (accumulatedUpdates.current) {
        apiUpdate(accumulatedUpdates.current);
        accumulatedUpdates.current = null;
      }
    }, delay),
  ).current;

  const handleUpdate = useCallback(
    (params: DebouncedUpdateParams) => {
      accumulatedUpdates.current = {
        id: params.id,
        params: {
          ...(accumulatedUpdates.current?.params || {}),
          ...params.params,
        },
      };
      processUpdates();
    },
    [processUpdates],
  );

  useEffect(() => {
    return () => {
      processUpdates.clear();
    };
  }, [processUpdates]);

  return handleUpdate;
}

export default useDebouncedUpdate;

무너뜨리기

1. useRef를 사용하여 업데이트 누적

수신되는 모든 업데이트의 결합된 매개변수를 저장하기 위해 누적 업데이트라는 useRef를 초기화합니다.

const 누적Updates = useRef(널);

2. API 호출 디바운싱

머티리얼 UI의 디바운스 유틸리티를 사용하여 디바운싱된 함수 processUpdates를 생성합니다.

const processUpdates = useRef(
  debounce(() => {
    if (accumulatedUpdates.current) {
      apiUpdate(accumulatedUpdates.current);
      accumulatedUpdates.current = null;
    }
  }, delay),
).current;

• processUpdates에 왜 useRef를 사용합니까? useRef를 사용하여 디바운스된 함수가 모든 렌더링에서 다시 생성되지 않도록 하여 디바운스 타이머를 재설정합니다.

3. useCallback으로 업데이트 처리

handUpdate 함수는 업데이트를 누적하고 디바운스된 API 호출을 트리거하는 역할을 담당합니다.

const handleUpdate = useCallback(
  (params: DebouncedUpdateParams) => {
    accumulatedUpdates.current = {
      id: params.id,
      params: {
        ...(accumulatedUpdates.current?.params || {}),
        ...params.params,
      },
    };
    processUpdates();
  },
  [processUpdates],
);

• 매개변수 병합: 모든 업데이트가 캡처되도록 새 매개변수를 기존 매개변수와 병합합니다.
• 트리거 디바운스: handlerUpdate가 호출될 때마다 processUpdates()를 트리거하지만 실제 API 호출은 디바운스됩니다.

4. useEffect로 정리하기

메모리 누수를 방지하기 위해 구성 요소가 마운트 해제될 때 디바운싱된 기능을 지웁니다.

useEffect(() => {
  return () => {
    processUpdates.clear();
  };
}, [processUpdates]);

작동 방식

1. 매개변수 누적: 각 업데이트는 해당 매개변수를 AccumulatedUpdates.current에 추가하여 기존 매개변수와 병합합니다.
2. 디바운스 실행: processUpdates는 실행되기 전에 밀리초 동안 활동하지 않을 때까지 기다립니다.
3. API 호출: 디바운싱 시간이 경과하면 병합된 매개변수를 사용하여 apiUpdate가 호출됩니다.
4. 누적 업데이트 재설정: API 호출 후 AccumulatedUpdates.current를 null로 재설정합니다.

사용예

구성요소에서 이 후크를 사용하는 방법은 다음과 같습니다.

import React from "react";
import useDebouncedUpdate from "./useDebouncedUpdate";

function SettingsComponent() {
  const debouncedUpdate = useDebouncedUpdate(updateSettingsApi, 500);

  const handleChange = (settingName, value) => {
    debouncedUpdate({
      id: "user-settings",
      params: { [settingName]: value },
    });
  };

  return (
    

       handleChange("username", e.target.value)}
      />
       handleChange("notifications", e.target.checked)}
      />
    
  );
}

function updateSettingsApi({ id, params }) {
  // Make your API call here
  console.log("Updating settings:", params);
}

• 사용자 작업: 사용자가 설정을 입력하거나 전환하면 handlerChange가 호출됩니다.
• 디바운스된 업데이트: 변경 사항은 500ms 동안 활동이 없으면 누적되어 API로 전송됩니다.

결론

디바운싱과 상태 축적을 결합하여 효율적이고 반응성이 뛰어난 애플리케이션을 만들 수 있습니다. useDebouncedUpdate 후크는 빠른 변경 사항을 함께 일괄 처리하여 불필요한 API 호출을 줄이고 성능을 향상시킵니다.

주요 시사점:

• 디바운싱은 신속한 연속 통화를 관리하는 데 필수적입니다.
• useRef를 사용하면 다시 렌더링하지 않고도 변경 가능한 상태를 유지할 수 있습니다.
• useDebouncedUpdate와 같은 사용자 정의 후크는 복잡한 로직을 캡슐화하여 구성 요소를 더 깔끔하고 유지 관리하기 쉽게 만듭니다.

이 후크를 프로젝트에 자유롭게 통합하고 특정 요구 사항에 맞게 조정하세요. 즐거운 코딩하세요!