[노마드 React - 영화앱만들기] 7. Practice Movie App - Coin Tracker(feat. #7.2 Coin Tracker)

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);
    });
  },[])
  // this code works only once

  return (
    <div>
      <h1>The Coins! {loading ? "" : `(${coins.length})`}</h1>
      {loading ? ( <strong>Loading...</strong>
      ) : (
      <select>
        {coins.map((coin) => <option>{coin.name} ({coin.symbol}) : {coin.quotes.USD.price} </option>)}
      </select>
      )}  
    </div>
  );
}

export default App;