[노마드 코더] Chapter.4 CRYPTO TRACKER

* useParams()

Router.tsx

function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/:coinId" element={<Coin />} />
        <Route path="/" element={<Coins />} />
      </Routes>
    </BrowserRouter>
  );
}

Coin.tsx

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

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

}
export default Coin;

useParams를 써서 Route에 있는 path 값을 가져와서 쓸수있다!

 

 

* 랜더링을 막기위해 state 값을 전달하는 법 (기존에 있던 데이터를 다시 api에서 불러오게 되면 랜더링이 되는데 그것을 막기위해 state를 쓴다 !)

{coins.map((coin) => (
            <Coin key={coin.id}>
              <Link
                to={{
                  pathname: `/${coin.id}`,
                }}
                state={{
                  name: coin.name,
                }}
              >

interface ILocation {
  state: {
    name: string;
  };
}
function Coin() {
  const [loading, setLoading] = useState(true);
  const { coinId } = useParams();
  const { state } = useLocation() as ILocation;
  console.log(coinId);
  return (
    <Container>
      <Header>
        <Title>{state?.name || "Loading"} </Title>
      </Header>

      {loading ? <Loader>Loading...</Loader> : null}
    </Container>
  );
}

 

가져 온것을 useLocation으로 저장하고 가져다 쓰면된다!

 

* nested routes를 구현하는 방법

부모 route의 path 마지막에 /*를 적어 명시적으로 이 route의 내부에서 nested route가 render 될 수 있음을 표시하고 자식 route를 부모 route의 element 내부에 작성하는 방법

<Route path="/:coinId/*" element={<Coin />} />

<Routes>
            <Route path="chart" element={<Chart />} />
            <Route path="price" element={<Price />} />
          </Routes>

 

실행 결과

state를 쓰지않고 URL을 이용하여 쓴다고 한다 !

링크를 사용해서 URL을 바꿈으로써 트리거가 되어서 re-render를 할 수 있다는게 정말 좋다는 것이다!

 

*usematch()

  const priceMatch = useMatch("/:coinId/price");
  const chartMatch = useMatch("/:coinId/chart");

만약 내가 coinId/price 안에 있다면 priceMatch는 object가 될거고 아니라면 null이 된다.

 

 

 

* React- Query

React 애플리케이션에서 서버 state를 fetching, caching, synchronizing, updating 할 수 있도록 도와주는 라이브러리

"global state"를 건드리지 않고 React 및 React Native 애플리케이션에서 데이터를 가져오고, 캐시하고, 업데이트한다.

 

첫번째로 api.ts를 만들어서 api 공간을 만들자

export  async function fectchCoins() {
    return fetch("https://api.coinpaprika.com/v1/coins").then((response =>
     response.json()
     )) 
}

그다음 fectchCoins를 쓰자

function Coins() {
  const { isLoading, data } = useQuery<ICoin[]>("allCoins", fectchCoins);

참쉽죠? 

isLoading 부분은 말 그대로 Loading을 해주는 기능

data는 이제 fectchCoins에서 온 데이터를 저장해주는 곳

"allCoins"는 키값 !

fectchCoins는 api공간에있는 fectchCoins를 쓰겠다 !

 

react - query를 두번 쓸때가 있다.

이럴때는 키 값이 겹쳐서 문제가 되는데 이렇게 해결하자 !

const { isLoading: infoLoading, data: infoData } = useQuery<IInfoData>(
    ["info", coinId],
    () => fetchCoinInfo(coinId)
  );
  const { isLoading: tickersLoading, data: tickersData } = useQuery<IPriceData>(
    ["tickers", coinId],
    () => fetchCoinTickers(coinId)
  );

isLoading과 data를 : 을 해주고 infoData랑 tickerData를 써주면 된다!

 

* react-qeury 세번째 인자

const { isLoading: tickersLoading, data: tickersData } = useQuery<IPriceData>(
    ["tickers", coinId],
    () => fetchCoinTickers(coinId),
    {
      refetchInterval: 5000,
    }
  );

 refetchInterval: 5000 은 5초마다 refetch 시켜준다는 뜻!

 

*react- helmet

- 제목을 바꾸고 싶다 하면 helmet을 쓰면 더욱 쉽게 바꿀 수있다.

- Helmet은 그저 head로 가는 direct link일 뿐이다!

 

설치법

 npm i --save-dev @types/react-helmet

 

사용법

<Helmet>
     <title>{state?.name ? state.name : loading ? "Loading..." : infoData?.name}</title>
</Helmet>