Coin Tracker

다음에 만들어볼건 Coin Tracker다

현재 코인가격만 쭈르륵 보여주는거야

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>
              {coin.name} ({coin.symbol}): {coin.quotes.USD.price} USD
            </option>
          ))}
        </select>
      )}
    </div>
  );
}

export default App;

완성된 코드는 다음과 같다.

먼저 state를 2개 만들어 준다.

const [loading, setLoading] = useState(true);

이건 로딩을 위한 state고

const [coins, setCoins] = useState([]);

이건 코인 리스트를 잠시 갖고 있기 위한 state다

그다음 return에다가

Loading중이면 Loading...이라는 메시지를 보여줄거고 아니라면 메시지를 보여주지 않게 코드를 추가했다.

다음은 코인 api를 가져왔다.

useEffect를 이용하여 그안에 fetch로 api를 추가 했다.

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

fetch("https://api.coinpaprika.com/v1/tickers")

를 추가한 후 크롬 콘솔창에서 network탭의 response를 확인하면 무수히 많은 코인정보가 들어오고 있는걸 알 수 있다.

우리는 이 response로 부터 json을 추출하기위해

.then((response) => response.json())

을 추가한다.

근데 이제 이 데이터를 어떻게 component에 보여주지?

여기서 두번째 state를 생성한다.

const [coins, setCoins] = useState([]);

무수히 많은 코인들의 정보는 array들로 이루어져 있으니 useState([])로 입력한다.

data 이름은 coins, 그리고 setCoins로 설정한다.

그리고 다시

    fetch("https://api.coinpaprika.com/v1/tickers")
      .then((response) => response.json())
      .then((json) => {
        setCoins(json);
        setLoading(false);

로 돌아와서
우리가 json을 얻었을때 json의 값을 setCoins 해준다.

그리고 이렇게 coins를 얻는게 끝나면 loading을 false로 해준다.

---

이제 마지막으로

       <select>
         {coins.map((coin) => (
           <option>
             {coin.name} ({coin.symbol}): {coin.quotes.USD.price} USD
           </option>
         ))}
       </select>

페이지에 코인들의 정보를 입력해줄 코드를 입력한다.
todo list에서 배운 map함수를 이용하여 첫번째 인자에다가 coin을 넣고
json내의 포함되어 있는 값인
코인 이름{coin.name} 코인 심볼({coin.symbol}): 코인가격{coin.quotes.USD.price} 화폐USD 를 넣어주면

다음과 같은 코인 트랙커가 완성된다.

---

마지막으로 타이틀 옆 코인갯수와 로딩 중 옵션 칸이 안보이게 처리해 주었다.

<h1>The Coins! {loading ? "" : `(${coins.length})`}</h1>

    {loading ? (
       <strong>Loading...</strong>
     ) : (
       <select>
         {coins.map((coin) => (
           <option>
             {coin.name} ({coin.symbol}): {coin.quotes.USD.price} USD
           </option>
         ))}
       </select>
     )}