import { useEffect, useState } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]);
  const [option, setOption] = useState();

  useEffect(() => {
    // 이 페이지가 처음 렌더링될 때에만 받아오고 싶다.
    fetch("<https://api.coinpaprika.com/v1/tickers>") // 데이터가 크므로 아마도 promise 리턴
      .then((response) => response.json())
      .then((json) => {
        setCoins(json);
        setLoading(false);
      }); // 이렇게 받아온 데이터를 렌더링하고 싶으면 state를 사용
  }, []);
  return (
    <div>
      <h1>The Coins! {loading ? "" :`(${coins.length})`}</h1>
      {loading ? <strong>Loading..</strong> : null}
      <select>
        {coins.map((coin) => (
          <option key={coin.id}>
            {coin.name} {coin.symbol} : ${coin.quotes.USD.price}
          </option>
        ))}
      </select>
    </div>
  );
}

export default App;