[영화 웹 서비스 만들기] #10. Coin Tracker

~7.2강

 

그냥 단순하게 암호화폐들과 그 가격들을 나열할 것인데, 이것을 위해서 useEffect를 사용할 것이다.

처음에는 로딩메시지가 보이고, 코인들이 나열되면 로딩메시지를 숨기고 리스트로 보여주는 것이다.

state를 만들면서 시작할 것인데, 하나는 loading, 하나는 coin용이다.

 

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);
      });
  }, []);

loading의 기본값은 true이다. component가 가장 처음으로 render되었을 때, 즉시 실행시키기 위해서 useEffect를 사용한다. 그런데 우리는 useEffect를 한 번만 사용하고 싶기 때문에, 어떤 것도 의존하지 않을 것이다.

즉, 아무것도 주시하고 있지 않으면 코드는 한 번만 작동한다.

 

그 후 fetch를 사용해서 api에 있는 것을 추출할 것인데, 이 때 json으로 원하는 것을 적으면 그걸 추출해 줄 수 있다.

setCoins를 사용해 coins를 얻었을 때, 코인의 state를 바꿔주도록 한다.

 

 

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>
  );

loading이 되었으면 coins안에 들어있는 길이와 함께 map을 사용해 항목을 선택되어 나타낼 수 있도록한다.

우리는 map을 사용할 것이다. (coins가 array이기 때문)

map을 사용할 때 첫번쨰 argumenr로 차례에 따른 값을 가지고, 그 다음에는 index를 가지고 와야하는데

api에 이미 있기 때문에 안 적어도 무방하다.

 

전체코드

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

export default App;

 

CODE Challenge

값을 받아서 현재의 돈이 원하는 것으로 선택될 수 있도록 한다!