• 실습일자 : 2024.05.28

목표

• coinTracker의 모든 coin 불러오기
• 화면 너비에 따라 최대 coin 정보 4개 보여주기
• 화면이 좁아지면 coin 정보 변형해서 보여주기

코드

src/App.module.css

/* .container {
  height: 100%;
  display: flex;
  justify-content: center;
} */

.coinsMainText {
  text-align: center; /* 텍스트 중앙 정렬 */
}

.coins {
  display: grid;
  grid-template-columns: repeat(4, minmax(400px, 1fr));
  grid-gap: 100px;
  padding: 150px;
  width: 50%;
  padding-top: 20px;
}

.coins > div {
  border: 1px solid #ccc; /* 각 코인 항목에 경계선 추가 */
  padding: 20px; /* 경계선과 내용 사이에 여백 추가 */
  border-radius: 8px; /* 경계선의 모서리를 둥글게 만듦 */
  background-color: #fff; /* 배경색을 흰색으로 설정 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 약간의 그림자 추가 */
}

@media screen and (max-width: 1090px) {
  .coins {
    grid-template-columns: 1fr;
    width: 100%;
  }
}

• coins 를 통해 한 화면에 최대 4개의 coin 정보를 보여주도록 하였다.

src/App.js

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

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); // >>> 모두 다 불러옴
      } 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="app-js-container">
      <div className={styles.coinsMainText}>
        <h1>IrishNoah Bit-Coin Information</h1>
      </div>

      <div className={styles.coins}>
        {coin.map((data) => (
          <div key={data.id}>
            <div>
              <p>Coin ID: {data.rank}</p>
              <p>Coin ID: {data.id}</p>
              <p>Coin Name: {data.name}</p>
              <p>Symbol: {data.symbol}</p>
              <p>First Data At: {data.first_data_at}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default TrainFetchApi;

• div className={styles.coins}
  • 이 안에 각 conin 정보를 호출하되 import styles from "./App.module.css";를 통해 불러온 css의 coins 정보를 넣어 스타일을 넣어 주었다.

결과 화면