CRYPTO TRACKER - (4)Home part two

Coin API 받아오기

//coins.tsx
useEffect(() => {
    (async() => {
      const response = await fetch("https://api.coinpaprika.com/v1/coins");
      const json = await response.json();
      // console.log(json);
      setCoins(json.slice(0, 100));
      setLoading(false);
    })();
  }, [])

Link를 통해 데이터 전달하기

useLocation()을 콘솔로 찍어보면 다음과 같이 나오게 된다.

//coins.tsx
<Coin key={el.id}>
  <Link 
    to={{
      pathname: `/${el.id}`,
      state: { name: el.name }
    }}

//react-router-dom 6.0.0이상부터는
//<Link to={} state={} > 처럼 사용한다.

>


//coin.tsx
interface RouteState {
  name: string;
}

function Coin() {
  const { coinId } = useParams<RouteParams>();
  const [loading, setLoading] = useState(true);
  const { state } = useLocation<RouteState>();
  console.log(state.name);

  return (
    <Container>
    <Header>
      <Title>{ state?.name || "Loading" }</Title>
    </Header>
    {
      loading
      ? <Loader>Loading...</Loader>
      : null
    }
    </Container>
  )
}