08. Coin-Tracker

import logo from './logo.svg';
import './App.css';
import { useEffect, useState } from 'react';

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

  useEffect(()=>{
    //fetch("https://api.coinpaprika.com/v1/tickers");  
    /*
      크롬 브루우저에서 F12로 network탭을 보면 tickers를 요청했다는 것을 확인할 수 있다.
      tickers를 클릭하면 Preview, Response 탭을 확인할 수 있는데, 
      Preview 탭에서 코인 정보를 확인할 수 있고 
      Response 탭의 데이터 값들을 json으로 추출한다.
    */

    fetch("https://api.coinpaprika.com/v1/tickers")
    .then((response) => response.json())
    //.then((json) => {console.log(json)})
    .then((json) => {
      setCoins(json);
      setLoading(false);
    });    

  }, []);

  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;

 

coin-tracker.z01

19.53MB

coin-tracker.z02

19.53MB

coin-tracker.z03

19.53MB

coin-tracker.zip

11.72MB