암호 화폐 리스트 만들기

출처: 노마드코더 - React JS로 영화 웹 서비스 만들기

 

프로젝트 흐름

1. 처음 시작할 때 '로딩 메시지'가 화면에 출력됩니다.

2. '로딩 메시지'를 숨기고 코인 리스트를 나열합니다.

- 암호화폐 리스트 출처 : https://api.coinpaprika.com/v1/tickers

 

주의할 점

1. useEffect로 API 한 번만 가져옵니다.

2. useState() 초기값을 안정해주면 undefined로 되고, undefined는 길이(length)를 가지고 있지 않습니다.

 

import { useState, useEffect } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]);
  const [cost, setCost] = useState(1);
  const [need, setNeed] = useState(1);
  const handleInput = (event) => setNeed(event.target.value);
  const onChange = (event) => {
    setCost(event.target.value);
    setNeed(1);
  };
  useEffect(() => {
    fetch("https://api.coinpaprika.com/v1/tickers")
      .then((response) => response.json())
      .then((json) => {
        setCoins(json);
        setLoading(false);
      });
  }, []);

  return (
    <div>
      <h1>Coins</h1>
      <input
        onChange={handleInput}
        value={need}
        type="number"
        placeholder="Please write your USD."
      />
      <hr />
      {loading ? (
        "Loading..."
      ) : (
        <select onChange={onChange}>
          <option>Select Coin!</option>
          {coins.map((coin) => (
            <option key={coin.id} value={coin.quotes.USD.price}>
              {coin.name} ({coin.symbol}): ${coin.quotes.USD.price} USD
            </option>
          ))}
        </select>
      )}
      <h2>You can get {need / cost}</h2>
    </div>
  );
}

export default App;