[ReactJS로 영화 웹 서비스 만들기 실습] API + async() + await()

IRISH·2024년 4월 29일

React 리액트

ReactJS-Movie-Web-Service

목록 보기

19/23

진행사항

저번 Coin Tracker API를 기반으로 async() + await()를 활용해 Data를 긁어오도록 하였다.
try-catch 구문을 통해 에러를 잡아보도록 했다.

코드

import { useEffect, useState } from "react";

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

  // 비동기 함수를 정의하고 데이터를 가져오기
  const getCoins = async () => {
    try {
      const response = await fetch("https://api.coinpaprika.com/v1/tickers");
      const json = await response.json();
      setCoins(json);
      setLoading(false);
    } catch (error) {
      console.error("Failed to fetch coins", error);
      setLoading(false); // 에러 발생 시에도 로딩 상태 해제
    }
  };

  useEffect(() => {
    getCoins();
  }, []);

  // 드롭다운에서 새 코인을 선택할 때 처리하는 기능
  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;

⇒ 코드 설명

getCoins 비동기 함수: fetch API를 사용하여 코인 데이터를 가져오는 로직을 async 함수 getCoins로 추출했습니다. 이 함수는 useEffect 내부에서 호출됩니다.
에러 처리: 비동기 처리 중 에러가 발생할 수 있으므로 try...catch 구문을 사용하여 에러를 처리하고 있습니다. 에러가 발생하더라도 사용자에게 로딩이 완료되었음을 알려주기 위해 setLoading(false)를 호출합니다.
응답 처리: 비동기 함수에서 await 키워드를 사용하여 프로미스가 이행될 때까지 기다린 후, 결과 데이터를 상태에 저장합니다.