React로 coin-tracker 만들기

import { useEffect, useState } from "react";
import "./App.css";

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! ({coins.length})</h1>
      {loading ? <strong>Loading...</strong> : null}
      <ul>
        {coins.map((coin) => (
          <li>
            {coin.name} ({coin.symbol}) : {coin.quotes.USD.price}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

• loading useState로 Loading...이 뜨고 안뜨는 상황 설정. 기본값은 true로 설정.
• if문으로 loading이 true면 Loading... 뜨고 falce면 null이 뜨게 설정.
• useEffect 안에서 fetch함수로 코인들의 정보를 받아오고 then으로 json 데이터를 response 받는다.
• coins를 빈배열로 useState에 받게끔 설정함.
• json값을 setCoins 해주게끔 바꾼다.
• coins 받기가 끝났으면 loading을 false로 바꿔줘야 하므로 setLoading(false)로 설정.
• map함수를 써서 name과 symbol, price를 받아와서 보여준다.