API 데이터 호출 관리 (Axios)

example

api

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(
    fetchManager[API_TYPE.TEST]({
      url: '/list',
      params,
    }),
  );

component 또는 사용자훅

'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 (
    <>
      <h2>Data Fetch Test (+ RTK Query)</h2>
      {isLoading && <div>로딩중!</div>}
      {isFetching && <div>데이터호출 진행중!</div>}
      {isSuccess && <div>데이터호출 완료!</div>}
      <div>{JSON.stringify(data)}</div>
    </>
  );
}

Next.js

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