리액트8 코인api 가져와서 출력하기 useEffect fecth map

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);
    })
  }, [])
  return (
    <div>
        <h1>The Coins!{ loading ? "" : `(${coins.length})`}</h1>
        {loading ? <strong>Loading...</strong> : 
      <ul>
        {coins.map((coin) => (
          <li key={coin.rank}>
           {coin.name} ({coin.symbol}) : {coin.quotes.USD.price}  
         </li>         
        ))}
      </ul>
    }
    </div>
    
  )
}

export default App;