• 실습 일자 : 20240527

목적

• 휴양림 API로 어떻게든 하려고 했지만, 할 때마다 어쩔 때는 fetch가 잘 될 때가 있고, 잘 안 될 때가 있어서 안정적으로 늘 fetch가 되는 coinTracker로 하기로 하였다.

코드

src/App.js

import React, { useState, useEffect } from "react";

function TrainFetchApi() {
  const [coin, setCoin] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchCoinData() {
      try {
        const response = await fetch("https://api.coinpaprika.com/v1/tickers");
        const coins = await response.json();
        setCoin(coins[0]);
        console.log(coins[0]);
      } catch (error) {
        setError(error);
        console.error("Error fetching coin data:", error);
      }
    }

    fetchCoinData();
  }, []);

  if (error) {
    return <div>Error fetching coin data: {error.message}</div>;
  }

  if (!coin) {
    return <div>Loading...</div>;
  }

  return (
    <div className="TrainFetchApi">
      <div>
        <h1>Hello Irish</h1>
      </div>
      <div>
        <p>Coin Name: {coin.name}</p>
        <p>Symbol: {coin.symbol}</p>
        <p>First Data At: {coin.first_data_at}</p>
      </div>
    </div>
  );
}

export default TrainFetchApi;

결과