[React] Coin Tracker

▷ Coin Tracker

• API를 이용하여 코인 정보를 불러오기 →useEffect

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

function App(){
  // loading은 로딩 상태를 나타냄
  const [loading, setLoading] = useState(true) 
  // coins는 코인 데이터를 저장함
  const [coins, setCoins] = useState([])
  
  useEffect(() => {
    // fetch함수는 promise를 반환하므로 then 메서드를 사용해 비동기적으로 데이터를 처리함
    fetch('https://api.coinpaprika.com/v1/tickers')
    // HTTP응답을 JSON 형식으로 변환
    .then((response) => response.json())
	// 변환된 JSON 데이터를 setCoins 함수를 통해 상태변수 coins에 저장
    .then((json) => {
      setCoins(json)
      // 로딩상태를 false로 변경
      setLoading(false)
    })
  }, []) 
  // 두 번쨰 인자로 빈 배열을 넘기는 이유 : 
  // 해당 useEffect 로직이 최초 한 번만 실행되고, 컴포넌트가 다시 랜더링될 때마다 다시 실행되지 않기를 원하기 때문
  // 빈 배열은 의존성이 없음을 의미한다
  
  return (
    <div>
      {/* loading중이라면 아무것도 보여주지말기 */}
      <h1>The Coins! {loading ? "" : `(${coins.length})`}</h1>
      {/* loading중이라면 loading중이라는 표시하고 */}
      {loading ? (
        <strong>Loading...</strong> 
      ) : (
        // 아니라면 데이터를 보여주기
        <select>
          {/* map은 Key를 사용해야하는데 받아오는 json 데이터에 id값이 포함되어있어서 여기서 필요없음 */}
          {coins.map((coin) => 
          <option>
            {/* url주소로 들어가면 JSON데이터를 볼 수 있는데 거기서 필요한 데이터만 가져오기  */}
            {coin.name} ({coin.symbol}): {coin.quotes.USD.price} USD
          </option>
          )}
        </select>
      )}
    </div>
  )
}

export default App;

 

https://api.coinpaprika.com/v1/tickers

위의 링크로 들어가면 coin JSON 데이터를 볼 수 있다