동백 // 노마드 코더 React JS: Coin Tracker

출처 : https://nomadcoders.co/

노마드 코더 Nomad Coders

 

---

 

 

Coin Tracker

핵심 : Coin Tracker를 만들며 배운것들을 복습해본다.

 

구현할 기능들 : 페이지를 들어왔을 때 로딩 메세지가 보이고, 코인들이 나열되면 로딩 메세지를 숨기고 코인들을 멋진 리스트로 보여주는 기능

 

// --------- import ---------
import { useEffect, useState } from "react";

function App() {
  // --------- state ---------
  const [loading, setLoading] = useState(true);
  const [coins , setCoins] = useState([]);
  useEffect(() => {
    fetch("https://api.coinpaprika.com/v1/tickers")
    // api로부터 response인자를 통해 데이터를 받고 response에서 json을 추출한 값을 return해준다.
    .then((response) => response.json())
    // 그다음 json을 setCoins(modify)에 넣어주고, setLoading에 false값을 return한다.
    .then((json)=> {
      setCoins(json);
      setLoading(false);
    });
  }, []);
  
  // --------- function ---------

 
  // --------- rendering ---------
  return (
    <div>
      <h1>The Coins! ({coins.length})</h1>
      {loading ? <strong>Loading...</strong> : null}
      <ul>
        {/* coin을 map으로 나눠서 coin 변수로 각 코인들을 리턴해준다. */}
        {coins.map((coin) => 
        <li>
          {/* 아래의 coin은 coins state의 array를 map으로 나눈 각각의 coin이다. */}
          {coin.name} ({coin.symbol}) : {coin.quotes.USD.price} USD
        </li>
        )}
      </ul>
    </div>
  );
};
export default App;

 

https://github.com/yardyard/nomadcoderReactJS/blob/master/reactMovie/practice0/moviereact/src/App.js