[React / TypeScript / API] API 구조 작성은 이렇게 한다.

요렇게 폴더 구조를 만들었다.

컴포넌트 호출 시

import { getCoin, getCoinPrice } from "APIs/get";

index가 있어서, 이렇게 선언하면서 사용이 가능해진다.

 

리액트 템플릿 사면, 이런 구조로 작성된 형태가 종종 있었는데, 왜 그렇게 했는지 이해가 된다.

이 구조가 가장 깔끔하다.

index.ts

import { getCoins } from "./getCoins";
import { getCoin, getCoinPrice } from "./getCoin";

export { getCoins, getCoin, getCoinPrice };

getCoins.ts

import axios from "axios";

export const getCoins = async () => {
  try {
    const response = await axios.get("https://api.coinpaprika.com/v1/coins");
    return await response.data.slice(0, 100);
  } catch (error) {
    console.log("error", error);
  }
};

getCoin.ts

import axios from "axios";

export const getCoin = async (coinID: string | undefined) => {
  try {
    const response = await axios.get(
      `https://api.coinpaprika.com/v1/coins/${coinID}`
    );
    return await response.data.slice(0, 100);
  } catch (error) {
    console.log("error", error);
  }
};

export const getCoinPrice = async (coinID: string | undefined) => {
  try {
    const response = await axios.get(
      `https://api.coinpaprika.com/v1/tickers/${coinID}`
    );
    return await response.data.slice(0, 100);
  } catch (error) {
    console.log("error", error);
  }
};

*error 부분은 아직 처리하지 않았다.