fetch 관리
npm install @makecode/fetch-managerapi
``tsx
import { FetchManager, API_TYPE } from '@makecode/fetch-manager';
import { getPromiseData } from '@/common/utils/fetch';
/**
* 테스트 데이터 호출
* @param parmas - GET 파라미터
* @param fetchManager - fetch-manager 인스턴스
*/
export const getTestDataList = (params: any, fetchManager: FetchManager) =>
getPromiseData(
fetchManagerAPI_TYPE.TEST,
);
`
component 또는 사용자훅
`tsx
'use client';
import { useEffect } from 'react';
import { useFetchManager } from '@makecode/fetch-manager';
import { getTestDataList } from '@/common/api/test/fetch';
import { testApi, useGetTodosQuery } from '@/common/api/test/hook';
/**
* 테스트 데이터 컴포넌트
*/
export default function DataList() {
const fetchManager = useFetchManager(); // Fetch Manager 사용
const { data, isLoading, isFetching, isSuccess, isError } =
useGetTodosQuery(); // RTK Query 사용
useEffect(() => {
const fetchData = async () => {
const data = await getTestDataList({}, fetchManager);
console.debug('DataList > useEffect > data', data);
};
fetchData();
}, []);
return (
<>
Next.js
리액트팀은 이 fetch API를 확장해 같은 서버 컴포넌트 트리 내에서 동일한 요청이 있다면 재요청이 발생하지 않도록 요청 중복을 방지했다.`