[ReactJS로 영화 웹 서비스 만들기 실습] API(Coin Tracker)

IRISH·2024년 4월 24일

React html 리액트

ReactJS-Movie-Web-Service

목록 보기

18/23

실습일자 : 2024.04.24

강의를 들은 것을 토대로 https://api.coinpaprika.com/v1/tickers 에서 나오는 Coin 관련 API를 통해 화면을 제작해본다.
강의와 다르게 label도 줘보고, 드롭다운 박스에서 특정 코인을 선택하면, 관련 정보들을 화면에 띄워보자
- 강의에서는 드롭다운까지만 구현되어 있음

코드

import { useEffect, useState } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState("");
  const [selectedCoin, setSelectedCoin] = useState(null); // 선택한 코인을 보유하고 있는 상태

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

  // 드롭다운에서 새 코인을 선택할 때 처리하는 기능
  const handleSelectChange = (event) => {
    const coinId = event.target.value; // 선택 옵션 값에서 코인 ID를 가져오기
    const coin = coins.find((coin) => coin.id === coinId); // ID를 기준으로 선택한 코인을 찾기
    setSelectedCoin(coin); // 선택한 코인 상태 설정
  };

  return (
    <div>
      <h1>The number of coins is {loading ? 0 : `${coins.length}`}</h1>
      {loading ? (
        <h2>Coins Page is now loading...</h2>
      ) : (
        <div>
          <label>Choose Coin!</label>
          <br />
          <select onChange={handleSelectChange}>
            {coins.map((coin) => (
              <option key={coin.id} value={coin.id}>
                {coin.name}
              </option> // coin.id를 키와 값으로 사용
            ))}
          </select>
          {selectedCoin && ( // 선택한 코인이 있는지 확인하고 해당 코인의 세부정보를 표시
            <p>
              Selected Coin: {selectedCoin.name} <br />
              Symbol:{selectedCoin.symbol} <br />
              total_supply : {selectedCoin.total_supply} <br />
              first_data_at : {selectedCoin.first_data_at} <br />
              USD price : {selectedCoin.quotes.USD.price}
            </p>
          )}
        </div>
      )}
    </div>
  );
}

export default App;

useEffect 훅을 이용해 첫 렌더링 시에만 “https://api.coinpaprika.com/v1/tickers”에서 정보를 받아오게 했다.
handleSelectChange 사용자 정의 함수
- 드롭다운에서 특정 코인을 선택할 때, 해당 코인의 여러 정보를 화면에 보여주게 하기 위해 해당 사용자 정의 함수를 구현했다.
loading 여부를 통해 로딩 페이지 처리
- 맨 처음 렌더링 될 때에만 true 값이고, API 페이지에서 값 받아오는 순간부터는 false 값으로 변환