Crypto Tracker 클론 코딩 실습
오늘은 지금까지 배웠던 개념들을 가지고 간단한 Coin Trakking Application을 구현하는 실습을 해볼 것이다.
coinpaprika API를 사용해 만들어 보자.
1) 환경 SetUp
React Query 패키지를 설치한다. 얘는 훨씬 편리하고 좋은 방식으로 data를 fetch할 수 있게 도움을 준다.
npm i react-router-dom react-query
npm i --save-dev @types/react-router-dom
*에러 일지(버전업으로 발생한 에러) : ... is not a <Route> component. All component children of <Routes> must be <Route> or <React.Fragment>
에러 그대로 <Routes>의 자식 컴포넌트로는 <Route>만 올 수 있다. ver5->ver6으로 업데이트 되면서 생겼다.
1) <Switch> 대신 <Routes>로 변경
2)
ver5에선 이렇게 썼지만
<Route>
<Coin />
</Route>
ver6에선 이렇게 써야한다.
<Route path="/:coinId" element = {<Coin />} />
Router.tsx
import {BrowserRouter, Route, Routes} from "react-router-dom";
import Coin from "./routes/Coin";
import Coins from "./routes/Coins";
function Router(){
return (<BrowserRouter>
<Routes>
<Route path="/:coinId" element = {<Coin />} />
<Route path="/" element = {<Coins />} />
</Routes>
</BrowserRouter>)
}
export default Router;