11. coin-tracker 예제

import {useEffect, useState} from "react";

function App() {
  const [loading, setLoading] = useState(true); 
  const [coins, setCoins] = useState([]);
  const [availMoney, setAvailMoney] = useState(0);
  const [selectedCoin, setSelectedCoin] = useState(0);  
  const inputChange = (event) => setAvailMoney(event.target.value);
  const onChange = (event) => setSelectedCoin(event.target.value);
  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>) : ( 
      <select onChange={onChange}>
        <option>Select coin</option>
        {coins.map((coin) => <option value={coin.quotes.USD.price}>{coin.name} ({coin.symbol}): {coin.quotes.USD.price} USD</option>)}
      </select>
      )}
      <div>
        <span>Available Money: </span><input type="number" value={availMoney} onChange={inputChange} placeholder="write available money" />
      </div>
      <div>
        <span>You can buy {availMoney / selectedCoin}</span>
      </div>
      <br />          
    </div>
  );
}

export default App;