Coin Tracker

fetch

coinpaprika API 사용

useEffect

1. loading

• api 로딩 끝나면 false되는 state
• 이를 통해 h1에서 코인 개수를 보이고 숨기거나 로딩 상황을 보이고 숨긴다

2. coins

• api를 통해 가져온 정보들 array
• map함수를 통해 array 안의 원소별로 <li>를 써서 name, symbol, quotes.USD.price를 출력

코드

import { useEffect, useState } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]);
  useEffect(() => {
    fetch("https://api.coinpaprika.com/v1/tickers")
      .then((response) => response.json())
      .then((json) => {
        setCoins(json);
        setLoading(false);
      });
  }, []);
  return (
    <div>
      <h1>The Coins! {loading ? "" : `(${coins.length})`}</h1>
      {loading ? (
        <strong>Loading..</strong>
      ) : (
        <ul>
          {coins.map((coin) => (
            <li>
              {coin.name} ({coin.symbol}) : ${coin.quotes.USD.price} USD
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default App;