🎬 ReactJS로 영화 웹 서비스 만들기 (10) - Coin Tracker 만들기

이번에는 useEffect를 포함한 내용들을 이용해 Coin Tracker를 만들어보도록 하겠다!

사용할 coin API는 https://api.coinpaprika.com/v1/tickers 이것!

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

coin API는 fetch를 이용해 불러와서 사용하면 된다.

{
  coins.map((coin) => (
    <li>
      {coin.name} ({coin.symbol}): ${coin.quotes.USD.price} USD
    </li>
  ));
}

여기서 coin이라는 변수는 coins array안에 있는 각각의 coin을 의미.

🔽 결과물 🔽

로딩 중엔 코인의 개수가 0으로 뜨고, 로딩이 끝나면 불러온 코인의 개수 값까지 출력되는 것을 볼 수 있다!

🔽 전체 코드 🔽

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

export default App;