[REACT] crypto-tracker project

학습일 : 2023. 04. 03

---

타입스크립트 + 리액트 + react-router-dom + styled-component + react-query 를 사용하기 위해

아래의 명령어로 설치해주고 새로운 프로젝트를 연다

뭔가 중복된 것도 있을텐데 일단 올려놓음

npx create-react-app --template typescript .
npm i --save-dev @types/styled-components
npm i styled-components
npm install react-router-dom
npm i react-router-dom react-query
npm i --save-dev @types/react-router-dom

 

 

새로운 프로젝트에선

coinpaprika 라는 API를 이용하여
코인 트래킹 어플리케이션을 만들어볼 것이다.

우선 기존 방식으로 데이터를 fetch 해볼텐데,
그 이후 리액트쿼리를 이용해 fetch 해볼 것이다.


리액트 쿼리 패키지는 기존보다 훨씬 편리한 방식으로
데이터를 fetch 시킬 수 있다고 한다. 너무 궁금하다.

API는 아래 경로를 참고하면 되겠다.
https://api.coinpaprika.com/docs#tag/Tickers/operation/getTickers

Coinpaprika

 

---

src 폴더 안에

routes 폴더를 만들어주고

그 안에 Coins.tsx, Coin.tsx 파일을 생성한다.

 

다음, src 폴더 안

Router.tsx 파일 생성

 

 

<Router.tsx>

Switch 대신 Routes를 써주도록 한다. (react-router-dom v6 이상 버전관련 이슈) 
Routes 자식으로는 Route 밖에 올 수 없다.
Route 자식으로 뭔가 올 수 없기 때문에 element로 추가해주도록 한다.

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Coins from "./routes/Coins";
import Coin from "./routes/Coin";

function Router() {
  return (
    <BrowserRouter>
      <Routes>
        {/* home - 코인들 */}
        <Route path="/" element={<Coins />} />
        {/* Coin ID - 해당 코인정보 */}
        <Route path="/:coinId" element={<Coin />} />
      </Routes>
    </BrowserRouter>
  );
}
export default Router;
// 작성해주고 App.tsx로 가서 Router를 렌더링해준다.

 

<App.tsx>

import Router from "./Router";

function App() {
  return <Router />;
}

export default App;

 

 

실행결과

localhost:3000 

home

 

<Coin.tsx>

useParams를 이용해보자

import { useParams } from "react-router";

function Coin(){
    const params = useParams();
    console.log(params);
    return <h1>Coin</h1>;
}

export default Coin;

 

 

 

localhost:3000/btc 경로로 이동하면

coinId가 btc로 잘 찍혀나오는 걸 볼 수 있다.

 

 

 

 

 

이젠 useParams를 이용하여  coinId가 화면에 찍혀나오도록 해보자

useParams의 자세한 사용법은

이전에 발행했던 글을 참고해보자

2023.03.21 - [REACT/개념정리] - [React] useParams() 사용하기

[React] useParams() 사용하기

 

 

<Coin.tsx>

import { useParams } from "react-router-dom";

function Coin() {
  // react-router-dom v6 이상의 경우
  // useParams쓰는 순간 타입이 string or undefined로 설정됨.
  // 따라서 const {coinId} = useParams(); 로만 적어줘도됨
  const { coinId } = useParams();

  return <h1>Coin: {coinId}</h1>;
}

export default Coin;

 

실행결과

home경로일 땐 coins가 출력

/어쩌고 경로일땐 coin:어쩌고가 출력된다.