Gitroom 소스 코드에서 useCallback을 사용하여 useSWR에서 fetcher를 캐시하는 방법을 찾았습니다.

위 이미지는 platform-analytics/render.analytics.tsx에서 가져온 것입니다. 이 코드 조각을 이해해 봅시다.

useSWR과 함께 useCallback 후크를 사용하여 React 애플리케이션에서 데이터 가져오기를 최적화하는 방법을 살펴보겠습니다. 제공된 코드 조각을 분석하여 가져오기 기능 캐싱이 중요한 이유를 설명하겠습니다.

코드 이해

단계별로 코드를 살펴보겠습니다.

const load = useCallback(async () => {
  setLoading(true);
  const load = (
    await fetch(\`/analytics/${integration.id}?date=${date}\`)
  ).json();
  setLoading(false);
  return load;
}, \[integration, date\]);

여기에서는 useCallback 후크 내부에 비동기 함수 로드를 정의합니다. 이 함수는 지정된 엔드포인트에서 데이터를 가져오고 로드 상태를 처리합니다. useCallback 후크는 이 함수가 기억되고 종속성(통합 및 날짜)이 변경될 때만 다시 생성되도록 보장합니다.

다음으로 useSWR을 사용하여 데이터 가져오기를 관리합니다.

const { data } = useSWR(\`/analytics-${integration?.id}-${date}\`, load, {
  refreshInterval: 0,
  refreshWhenHidden: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false,
  revalidateIfStale: false,
  refreshWhenOffline: false,
  revalidateOnMount: true,
});

여기서 useSWR은 키(/analytics-${integration?.id}-${date})와 메모된 로드 기능으로 구성됩니다. 구성 옵션은 데이터의 유효성 재검사 동작을 제어합니다.

useCallback이 불필요한 재패치를 방지하는 방법

useCallback이 불필요한 다시 가져오기를 방지하는 방법을 이해하려면 React가 함수 참조를 처리하는 방법과 useSWR이 작동하는 방법을 조사해야 합니다.

React의 함수 참조

React에서는 구성 요소가 다시 렌더링될 때마다 그 안에 정의된 모든 함수가 다시 생성됩니다. 이는 useCallback이 없으면 렌더링할 때마다 로드 함수의 새 인스턴스가 생성된다는 의미입니다.

사용에 미치는 영향SWR

useSWR은 React용 데이터 가져오기 라이브러리입니다. 키를 사용하여 데이터를 식별하고 가져오기 기능을 사용하여 데이터를 가져옵니다. useSWR은 페처 함수 참조의 안정성에 의존합니다. 참조가 변경되면 useSWR은 이를 페처의 실제 논리가 변경되지 않은 경우에도 데이터를 다시 가져와야 한다는 신호로 해석할 수 있습니다.

자세한 설명은 다음과 같습니다.

1. 없이 콜백 사용:

const load = async () => {
  setLoading(true);
  const load = (
    await fetch(\`/analytics/${integration.id}?date=${date}\`)
  ).json();
  setLoading(false);
  return load;
};

const { data } = useSWR(\`/analytics-${integration?.id}-${date}\`, load, {
  refreshInterval: 0,
  refreshWhenHidden: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false,
  revalidateIfStale: false,
  refreshWhenOffline: false,
  revalidateOnMount: true,
});

이 경우 모든 렌더링은 새로운 로드 기능을 생성합니다. useSWR은 매번 다른 함수 참조를 확인하므로 통합 및 날짜가 변경되지 않은 경우에도 불필요한 다시 가져오기가 발생할 수 있습니다.

사용콜백:

const load = useCallback(async () => {
  setLoading(true);
  const load = (
    await fetch(\`/analytics/${integration.id}?date=${date}\`)
  ).json();
  setLoading(false);
  return load;
}, \[integration, date\]);

const { data } = useSWR(\`/analytics-${integration?.id}-${date}\`, load, {
  refreshInterval: 0,
  refreshWhenHidden: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false,
  revalidateIfStale: false,
  refreshWhenOffline: false,
  revalidateOnMount: true,
});

useCallback에 로드 함수를 래핑하여 종속성(통합 및 날짜)이 변경될 때만 다시 생성되도록 보장합니다. 함수 참조의 이러한 안정성은 통합이나 날짜가 변경되지 않는 한 페처 함수가 변경되지 않았음을 useSWR에 알려주므로 불필요한 재페치를 방지합니다.

shadcn-ui/ui를 처음부터 빌드하는 방법을 배우고 싶으십니까? 확인해 보세요 처음부터 빌드하기

나에 대해:

웹사이트: https://ramunarasinga.com/

링크드인: https://www.linkedin.com/in/ramu-narasinga-189361128/

Github: https://github.com/Ramu-Narasinga

이메일: [email protected]

shadcn-ui/ui를 처음부터 빌드

참고자료:

1. https://github.com/gitroomhq/gitroom/blob/c03b96215fa30b267a97d7eafc2281f482a3192f/apps/frontend/src/comComponents/platform-analytics/render.analytics.tsx#L25
2. https://github.com/search?q=repo:gitroomhq/gitroom useSWR&type=code
3. https://swr.vercel.app/docs/getting-started
4. https://react.dev/reference/react/useCallback