Coin Tracker

이 글은 노마드 코더님의 React 강의를 학습한 내용을 기반으로 작성합니다.

 

---

암호화폐들과 그 가격을 나열하는 단순한 프로젝트를 만들어 본다.

 

[개요]

처음 페이지를 들어왔을 때 로딩 메시지가 보이고 코인들이 나열되면 로딩 메시지를 숨기고 코인들을 리스트로 보여준다.

 

로딩

import { useState, useEffect } 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 사용

coinpaprika라는 API를 사용한다.

 

https://api.coinpaprika.com/v1/tickers 에서는 수많은 코인들에 대한 정보를 넘겨준다.

 

컴포넌트가 처음 render될 때 이 함수를 즉시 실행시키도록 한다.

 

코드

import { useState, useEffect } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    fetch("https://api.coinpaprika.com/v1/tickers");
  }, []);
  return (
    <div>
      <h1>The Coins!</h1>
      {loading ? <strong>Loading...</strong> : null}
    </div>
  );
}

export default App;

 

결과

 

페이지를 새로고침하고 네트워크를 확인해보면 tickers가 추가된 것을 확인할 수 있을 것이다.

 

 

대략 2500개의 코인을 받았다.

 

이제 이러한 response로부터 json을 추출해야 한다.

 

Json 추출

import { useState, useEffect } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    fetch("https://api.coinpaprika.com/v1/tickers")
      .then((response) => response.json())
      .then((json) => console.log(json));
  }, []);
  return (
    <div>
      <h1>The Coins!</h1>
      {loading ? <strong>Loading...</strong> : null}
    </div>
  );
}

export default App;

 

Json 추출 결과

 

내용 추가

import { useState, useEffect } 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;

 

결과 화면

 

---

Challenge

달러를 입력하면 몇 개의 코인으로 변환 가능한지 출력하기

 

코드

import { useState, useEffect } from "react";
import styles from "./Label.module.css";

function App() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]);
  const [dollar, setDollar] = useState(0);
  const [coin_price, setCoinPrice] = useState(1);
  useEffect(() => {
    fetch("https://api.coinpaprika.com/v1/tickers")
      .then((response) => response.json())
      .then((json) => {
        setCoins(json);
        setLoading(false);
      });
  }, []);
  const dollarChange = (event) => {
    setDollar(event.target.value);
    console.log(dollar);
  };
  const coinChange = (event) => {
    setCoinPrice(event.target.value);
    console.log(coin_price);
  };
  return (
    <div>
      <h1>The Coins! {loading ? "" : `(${coins.length})`}</h1>
      {loading ? (
        <strong>Loading...</strong>
      ) : (
        <div>
          <div>
            <label className={styles.label} for="coin-select">
              <strong>Choose Coin!</strong>
            </label>
            <select id="coin-select" onChange={coinChange}>
              <option>Select Coin!</option>
              {coins.map((coin, index) => (
                <option value={coin.quotes.USD.price} key={index}>
                  {coin.name} ({coin.symbol}): {coin.quotes.USD.price} USD
                </option>
              ))}
            </select>
          </div>
          <div className={styles.div}>
            <label for="dollar" className={styles.second}>
              Enter the money you have
            </label>
            <input
              onChange={dollarChange}
              value={dollar}
              id="dollar"
              type="number"
            />
            $
          </div>
          <div className={styles.div}>You can buy {dollar / coin_price}</div>
        </div>
      )}
    </div>
  );
}

export default App;

 

결과 화면