[React] 주식사이트 만들기-2 코인API 가져오기 (with Redux toolkit)

오늘은 코인 API 를 가져와 실시간 데이터를 가져오는 작업을 할 예정이다.

결론부터 얘기하면 Redux에 대해 더 공부할 필요성을 느꼈다.

(Redux 사용하기 위한 빌드가 꽤 난해하다고 생각했기때문. 또한 docs를 봐도 잘 이해가 되지 않는다. 다만 튜토리얼을 진행하고 직접 사용해보면서 내가 느꼈던 *Props 처리하는데 너무 많은 코드들이 들어간다* 라는 점을 해결하는 툴이라는 것.. )

 

그리고 이번에 사용한 것은 Redux toolkit 중에서 RTK Query 이다.

 

코인 데이터를 가져오기 위해 Rapid API 에서 api-key 와 url 을 제공받았다.

https://rapidapi.com/Coinranking/api/coinranking1

Coinranking API Documentation (Coinranking) | RapidAPI

 

다음 Redux-toolkit 패키지를 가져왔다.

`npm install @reduxjs/toolkit`
`npm i redux`

 

먼저 API 키를 .env 파일에 저장시켜주고, gitignore을 해주었다.

(REACT_APP을 붙여주는건 필수.)

REACT_APP_CRYPTO_API_KEY=0DXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

다음 store.ts 파일을 만들어주어 store 을 만들어주었다.

 

import { configureStore } from "@reduxjs/toolkit";

export default configureStore({
  reducer: {
  },
});

 

다음으로 cryptoAPI service 의 req,res 를 처리해 줄 코드를 작성했다.

(Toolkit docs와 유튜브를 참조했다.)

 

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 { useGetCryptosQuery } = cryptoApi;

 

다음으로 store에 reducer을 작성해주고, index.tsx 파일에 store을 연결시켜주었다.

 

- store.ts

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

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

 

- index.tsx

ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <BrowserRouter>
        <Provider store={store}>
          <App />
        </Provider>
      </BrowserRouter>
    </ApolloProvider>
  </React.StrictMode>,

  document.getElementById("root")
);

 

그리고 데이터를 가져와 콘솔로그로 확인해본 결과

export const Home = () => {
  const { data, isLoading, error } = useGetCryptosQuery("coins");
  console.log(data);

 

 

데이터 호출이 잘 되고 있었다.

일단 RTK docs 와 유튜브 영상을 보면서 구현시켰지만 조금 더 학습할 필요가 있겠다.

실시간 주식데이터를 가져올 때 직접 구현하면서 심화학습을 해야겠다.