[React 기초] 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()) // response를 받아서 response.json 리턴
      .then((json) => { //리턴한 json을 사용하여
        setCoins(json); //coins에 json데이터 삽입
        setLoading(false); //loading false로 변경
      });
  }, []);
  return (
    <div>
      <h1>Coins</h1>
      <ul>
        {coins.map((coin) => (
          <li>{coin.name}</li>
        ))}
      </ul>
    </div>
  );
}