리엑트 - useEffect를 활용해 API받아오기.

import { useEffect, useState } from 'react';

function App() {

  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]);
  
  //useEffect로 처음 로딩시 구동되게 설정해놓았다.
  //API받아오는 방법
  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>
          {
            coins.map(el => {
              return (
                <option key={el.id}>
                  { el.name } ({ el.symbol }) : { el.quotes.USD.price } USD
                </option>
              );
            })
          }
        </select>
      }

    </div>
  );
}

export default App;