[React JS] Coin price tracker 만들기

이번에는 React JS / useEffect를 이용해서 간단한 암호화폐 시세를 알려주는 앱을 만들어보기로 한다.

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!</h1>
      {loading ? <strong>Loading...</strong> : null}
    </div>
  );
}

export default App;

다음과 같이 설정해준다. 우선 로딩을 만들어 주고 ( true, false를 설정해서 화면에 출력하도록 설정) 

useEffect를 이용해서 coin API 정보를 가져온다. 

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

이후 then과 response로 해당 정보의 json을 불러오고, 그 정보를 setCoins에 넣는다.

마지막으로 setLoadingd을 false로 지정해서 fetch 정보를 다 불러왔으면 자동으로 loading이 사라지게 만들어 준다.

하단은 Fetch에 대해서 참고할 수 있는 블로그이다.

https://ko.javascript.info/fetch

fetch

이제 Coins에 있는 정보들을 출력하기 위해서 map함수를 사용한다.

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;

json형태의 coins 배열을 console 해서 확인하면,

coins array

위 사진과 같이 나온다. 여기서 id가 지정되어 있으므로 지난번 item 배열처럼 index를 이용해 부여하지 않고 key={coin.id}를 넣어준다.

목록에 name, symbol, quotes.USD에 정보들이 있는 것을 확인할 수 있는데, 이 부분들을 map함수에 입력한다.

추가적으로 loading... 문구에서 select의 마크가 보이기 때문에 select구문도 상기의 삼항 연산자에 집어넣었다.

결과 화면

여기서 코인의 개수를 줄이고, 가격을 입력하면 해당 코인을 몇 개 구매할 수 있는지도 확인 하기 위해 추가적인 코드를 입력하였다.

import { useEffect, useState } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]);
  const [buy, setBuy] = useState(false);
  const handleBuyClick = (event) => {
    event.preventDefault();
    setBuy((current) => !current);
    setPrice(false);
  };
  const [price, setPrice] = useState(false);
  const handlePriceClick = (event) => {
    event.preventDefault();
    setPrice((current) => !current);
    setBuy(false);
  };
  const [money, setMoney] = useState(0);
  const saveMoneyValue = (event) => {
    setMoney(event.target.value);
  };
  coins.splice(100, coins.length - 100);
  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>
      ) : (
        <div>
          <form>
            <button onClick={handleBuyClick}>Buy Coins</button>
            <button onClick={handlePriceClick}>Market price</button>
          </form>
          {buy ? (
            <div>
              <h3>How much do you have?</h3>
              <form>
                <input
                  onChange={saveMoneyValue}
                  value={money}
                  type="number"
                  min="0"
                />
                {" $"}
              </form>
              <hr />
              <h3>You can buy...</h3>
              <select>
                {coins.map((coin) => (
                  <option key={coin.id}>
                    {money / coin.quotes.USD.price} / {coin.name} ({coin.symbol}
                    )
                  </option>
                ))}
              </select>
            </div>
          ) : null}
          {price ? (
            <div>
              <h3>Market Price</h3>
              <hr />
              <select>
                {coins.map((coin) => (
                  <option key={coin.id}>
                    {coin.name} ({coin.symbol}): ${coin.quotes.USD.price} USD
                  </option>
                ))}
              </select>
            </div>
          ) : null}
        </div>
      )}
    </div>
  );
}

export default App;

첫 페이지에 두개의 button을 만들어서 하나는 가격 입력, 하나는 시세확인 기능을 넣었다.

위에 useState 기능으로 해당 버튼을 누르면 true, false 값이 변하며 관련 항목들이 나오게 정리하였다.

시작화면

buy coins 클릭 시 가격을 입력하고, 그에 맞는 코인 개수를 알 수 있다

Market price는 코인 시세를 확인할 수 있다

https://github.com/ge5rg2/react-for-beginners/commit/b57b352f706e75d6c347a33001a583f4678c835f#diff-3d74dddefb6e35fbffe3c76ec0712d5c416352d9449e2fcc8210a9dee57dff67

Coin Price tracker fin · ge5rg2/react-for-beginners@b57b352