[React] 주식사이트 만들기-4 코인API 로 차트 만들기 (라이브러리x)

이번에는 코인 차트를 만들 차례이다.

먼저 해야할 일은 RTK Query 를 이용해 api 데이터를 가져오는 일이다.

 

- services/cryptoApi.ts

 

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

const cryptoApiHeaders = {
  "x-rapidapi-host": "coinranking1.p.rapidapi.com",
  "x-rapidapi-key": process.env.REACT_APP_CRYPTO_API_KEY,
};

const baseUrl = "https://coinranking1.p.rapidapi.com";

const createRequest = (url: string) => ({ url, headers: cryptoApiHeaders });

export const cryptoApi = createApi({
  reducerPath: "cryptoApi",
  baseQuery: fetchBaseQuery({ baseUrl }),
  endpoints: (builder) => ({
    getCryptos: builder.query({
      query: (name) => createRequest(`/${name}`),
    }),
  }),
});

export const cryptoHistoryApi = createApi({
  reducerPath: "cryptoHistoryApi",
  baseQuery: fetchBaseQuery({ baseUrl }),
  endpoints: (builder) => ({
    getCryptosHistory: builder.query({
      query: (id) => createRequest(`/coin/${id}/history/7d`),
    }),
  }),
});

export const { useGetCryptosQuery } = cryptoApi;
export const { useGetCryptosHistoryQuery } = cryptoHistoryApi;

 

cryptoHistory => chart data

 

- store.ts

 

import { configureStore } from "@reduxjs/toolkit";
import { cryptoApi, cryptoHistoryApi } from "../services/cryptoApi";

export default configureStore({
  reducer: {
    [cryptoApi.reducerPath]: cryptoApi.reducer,
    [cryptoHistoryApi.reducerPath]: cryptoHistoryApi.reducer,
  },
});

 

 

- coin.tsx

 

import React from "react";
import { useGetCryptosHistoryQuery } from "../../services/cryptoApi";

interface Size {
  width: number | undefined;
  height: number | undefined;
}

export const Coin = () => {
  const { data, isLoading, error } = useGetCryptosHistoryQuery("3");
  console.log(data);
  return <div></div>;
};

"3"은 일단 임의로 가져온 아이디 값이며 추후 버튼 클릭 형식으로 바꿀 예정이다.

 

 

결과는

 

 

데이터가 잘 전달되고 있다.

 

다음은 캔들차트를 구현할 차례이다.

 

여기서 문제가 생겼다. 내가 가져올 수 있는 coin data는

1. 시간별 데이터이다. (내가 원하는 데이터는 일별 데이터이다.)

2. 고가 저가 시가 종가 데이터가 없고 오로지 가격과 시간 데이터만 있다.

 

따라서 api 데이터를 분석 후 원하는 데이터 추출을 위한 array 작업을 해야겠다.

 

작업 완료 후 다시 글을 올릴 예정이다.