7.2 Coin Tracker

이번에는 암호화폐들과 가격을 나열해보자.

 

먼저 useEffect를 사용할 것인데

페이지나 앱을 들어왔을 때 로딩 메세지가 보이고,

코인들이 나열되면,

로딩메세지를 숨기고 코인들을 리스트로 보여주도록해보자!

 

 

로딩을 위하는것, 코인 리스트를 잠시가지고 있기 위한 state를 만들어서 해보자~!

import { useState } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  return (
    <div>
      <h1>The Coins</h1>
      {loading ? <strong>Loading...</strong> : null}
    </div>
  );
}

export default App;

아래의 링크에 접속하여 api를 사용해보자.

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

여기에는 엄청나게 많은 코인을 넘겨주고 있다. (약 8000개)

 

컴포넌트가 가장 처음으로 render되었을 때 이 함수를 즉시 실행시켜보자.

 

개발자창을 띄우고

network창에서 어떤 부분을 보면 tickers를 request했다는 것을 확인할 수 있다.

다음을 확인하면 엄청나게 많은 코인들을 받았다.

그래서 response로부터 아래와 같은 json을 추출해 내보자.

 

response를 받아서 response.json을 return해주자. 그리고, 그 json으로 consoloe.log를 해보자.

그러면 다음과 같이 console.log창이 나온다.

이것이 우리가 다루어야할 데이터이다!

 

자 그럼 이 data로 state에 한번 넣어보자.

 

하지만 이와 동시에 coin얻기를 끝냈다면 loading을 false로 바꾸어줘야하기때문에

setLoading을 false로 바꿔주자!

 

그래서 새로고침을 하게 되면, loading이 되게 빠르게 있다가 없어지는데

이는 우리가 coins를 아주 빠르게 가져온다는 뜻으로, API가 엄청 빠르게 response한다는 것을 알 수 있다.

map을 사용한다면 react는 element에 key를 주도록 했는 점을 사용하여서 화면에 나타내보자.

 

자 갯수를 언급해보면

0개 였다가, 2500개가 된다

처음에는 기본값으로 비어있는 array를 넘겨주기에 처음에는 0개이다!

 

그러면 USD를 BTC로 전환해보자~!

 

우선 select문으로 바꿔보자.

그럼 아래와 같이 loading이 나왔다, select문으로 바뀌는 것을 볼 수 있다.

 

 

근데 그리 이쁘지는 않기에, loading중에는 select를 숨겨보자

null에 넣으면 되는 것이다!

 

제목에서도!

 

 

 

근데 아래와 같이 key prop 에러가나는데 이는 option에 id 옵션을 더해주면 된다~!

전체 코드

import { useEffect, useState } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]);
  useEffect(() => {
    fetch("https://api.coinpaprika.com/v1/tickers")
      .then((response) => response.json())
      .then((json) => {
        setCoins(json);
        setLoading(false);
      });
  }, []);
  return (
    <div>
      <h1>The Coins! {loading ? "" : `(${coins.length})`}</h1>
      {loading ? (
        <strong>Loading...</strong>
      ) : (
        <select>
          {coins.map((coin) => (
            <option key={coin.id}>
              {coin.name} ({coin.symbol}) : ${coin.quotes.USD.price} USD
            </option>
          ))}
        </select>
      )}
    </div>
  );
}

export default App;