API 데이터 호출 관리 (Axios)

example

api

``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 (
<>


Data Fetch Test (+ RTK Query)

리액트팀은 이 fetch API를 확장해 같은 서버 컴포넌트 트리 내에서 동일한 요청이 있다면 재요청이 발생하지 않도록 요청 중복을 방지했다.`
즉, 서버 컴포넌트 내부 서버렌더링을 할 때, 데이터 통신은 fetch 를 통해서 해야 효율적!