@makestory/fetch-manager

API 데이터 호출 관리 (Axios)

• React 연동
• Redux (Redux-toolkit) 연동 코드 존재

특정버전 호환이 필요한 의존성 모듈은 package.json 에 peerDependencies 항목에도 의존성 패키지 및 버전 명시 필수!

패키지를 사용하는 쪽에 현재 패키지가 의존하는 라이브러리 버전 설치 필수라는 것 명시!
실제로 패키지에서 직접 require(import) 하지는 않더라도 호환성이 필요한 경우 명시!

리액트팀은 이 fetch API를 확장해 같은 서버 컴포넌트 트리 내에서 동일한 요청이 있다면 재요청이 발생하지 않도록 요청 중복을 방지했다.

즉, 서버 컴포넌트 내부 서버렌더링을 할 때, 데이터 통신은 fetch 를 통해서 해야 효율적!

example

api

import { FetchManager, API_TYPE, URL_PATH } from '@lotte/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: URL_PATH.TEST.LIST,
      params,
    }),
  );

component 또는 사용자훅

'use client';

import { useEffect } from 'react';
import { useFetchManager } from '@lotte/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>
    </>
  );
}