[React JS 마스터클래스] Cryto Tracker

React Query는 편리한 방식으로 데이터를 fetch 시킬 수 있다

 

npm i react-router-dom

React RouterDom은 어플리케이션에 URL을 가질 수 있게 해 주고 기본적으로 각기 다른 화면을 갖도록 해준다

/ -> All coins
/:id -> /btc -> Coin Detail

Nested router
/btc/information
/btc/chart

Nested Router(중첩된 라우터)란 한 스크린 내에 또 다른 Router를 가질 수 있는 것

Switch는 한 번에 하나의 Route를 렌더링 할 수 있는 방법

 

<Route path="/:coinId">

Router에게 우리의 URL이 변숫값을 갖는다는 것을 말해주는 방식

 

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

interface RouteParams {
  coinId: string;
}
function Coin() {
  const { coinId } = useParams<RouteParams>();

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

URL의 파라미터 부분을 잡아내고 싶을 때 useParams를 사용하면 된다

useParams는 우리가 URL에서 관심있어 하는 정보를 잡아낼 수 있게 해 준다

타입스크립트에게 useParams가 coinId를 포함하는 오브젝트를 반환할 것이라는 것을 말해준다

 

 

createGlobalStyle은 전역 스타일을 처리하는 특수 Styled Component를 생성하는 helper 함수

한 컴포넌트를 만들 수 있게 해 주는데 렌더링 될 때 전역 스코프에 스타일들을 올려준다

 

Fragment는 일종의 유령 컴포넌트로 부모 없이 서로 붙어있는 많은 것들을 리턴할 수 있게 해 준다

<> </>

 

새로고침하지 않게 하려면 a 태그가 아니라 Link 사용

 

위에는 async, 아래는 response를 받기 위해 await을 쓴다

** api 가져올 때 fetch보다 axios가 더 편하다 (fetch로 가져오면 json으로 변환해줘야 한다)

 

특정한 시기에만 코드를 실행하기 위해서 useEffect 사용 -> component의 시작할 때 실행될지, 끝날 때 실행될지, 뭐든 변화가 일어날 때마다 실행할지 결정 가능

 

<Link to={{
  pathname: `/${coin.id}`,
  state: { name: coin.name },
}}>

클릭할 때 다른 화면으로 state 보내기

 

react router DOM이 보내주는 location object에 접근하기만 하면 된다

 

Nested router 혹은 Nested route는 route 안에 있는 또 다른 route

 

useRouteMatch는 내가 특정한 URL에 있는지의 여부를 알려준다

 

React Query

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

전역 상태를 건드리지 않고 React 및 React Native 애플리케이션에서 데이터를 가져오고 캐시하고 업데이트한다

 

  const { isLoading, data } = useQuery<CoinInterface[]>("allCoins", fetchCoins);

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

useQuery 훅은 fetcher 함수를 부르고 fetcher 함수가 끝나면 react query는 json을 data에 넣는다

 

React Helmet은 내부에서 render 되는 것을 전부 head로 보내는 component를 제공하는 라이브러리

Helmet은 head로 가는 direct link!