React : Coin Tracker, API

💡노마드코더 니꼬쌤의 강의를 보며 공부하는 시리즈입니다.

Coin Tracker

암호화폐들과 그 가격을 List 형식으로 보여주는 것을 목표로 하는 프로젝트.

목표수립
1. 페이지 or 앱에 접속 했을 때 loading 메세지를 보여준다.
2. 코인의 data를 가져오면 loading 메세지는 숨기고 SUPER COOL COIN LIST를 보여준다.

👉🏻이번에 사용된 API:coinpaprika

JSONView(익스텐션 바로가기)
해당 API페이지는 json파일을 row형식으로 보여주기 때문에 인간이 data를 읽기에 굉장히 불편하다. chrome을 이용해서 개발을 한다면 google의 확장프로그램을 사용하면 data 읽기가 수월해진다.

import { useState, useEffect } from 'react';

function App() {
  
  //loading의 초기값을 false로 세팅
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]);
  
  useEffect(() => {
    //fetch로 api의 data 가져온 다음에
    fetch('https://api.coinpaprika.com/v1/tickers')
      .then(
        //res를 res.json형식의 배열로 리턴해라
        (res) => res.json()
      )
      //그 다음에 json을 coins에 담아라.
      .then((json) => setCoins(json));
    //setLoading으로 loading의 값을 false로 변경
    setLoading(false);
  }, []);
  return (
    <div>
      <h1>The Coins({coins.length})</h1>
      {loading ? (
        <strong>Loading...</strong>
      ) : (
        <ul>
          {coins.map((item) => (
            <li key={item.id}>
              {item.name}({item.symbol}): $
              {item.quotes.USD.price}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}
export default App;

결과

응용 : SELECT로 만들기

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(
        (res) => res.json()
      )
      .then((json) => setCoins(json));
    setLoading(false);
  }, []);
  return (
    <div>
      <h1>The Coins({coins.length})</h1>
      {loading ? (
        <strong>Loading...</strong>
      ) : (
        <select>
          {coins.map((item) => (
            <option key={item.id}>
              {item.name}({item.symbol}): $
              {item.quotes.USD.price}
            </option>
          ))}
        </select>
      )}
    </div>
  );
}
export default App;

CODE CHAELLENGE

목표수립
1. input에 금액을 입력하고,
2. select로 코인을 선택하면
3. 구입할 수 있는 코인의 갯수를 출력한다.

import { useState, useEffect } from 'react';

function App() {
  const [budget, setBudget] = useState(0);
  const [count, setCount] = useState(0);
  const [coins, setCoins] = useState([]);

  function onChange(e) {
    setBudget(e.target.value);
    let exchangeRate = Math.round(budget / 1300);
    setCount(exchangeRate / e.target.value);
  }
  function selectCoin(e) {
    let coinPrice = Number(e.target.value.split('$')[1]);
    let exchangeRate = Math.round(budget / 1300);
    setCount(exchangeRate / coinPrice);
  }
  useEffect(() => {
    fetch('https://api.coinpaprika.com/v1/tickers')
      .then((res) => res.json())
      .then((json) => setCoins(json));
  }, []);
  return (
    <div>
      <h1>The Coins({coins.length})</h1>
      <div>
        <label htmlFor="price">예산</label>
        <input
          type="number"
          id="price"
          value={budget}
          onChange={onChange}
        />
      </div>
      <select onChange={selectCoin}>
        {coins.map((item) => (
          <option key={item.id}>
            {item.name}({item.symbol}) : $
            {item.quotes.USD.price}
          </option>
        ))}
      </select>
      <div>
        <label htmlFor="count">갯수</label>
        <input
          type="number"
          id="count"
          value={count.toFixed(5)}
          disabled
        />
      </div>
    </div>
  );
}
export default App;

결과

수립한 목표대로는 잘 나오지만 부자연스럽다.
현재 셀렉트 되어있는 옵션의 가격을 받아줄 useState를 만들고, select에서 defaultValue로 coins가 빈값이 아니라면 coins[0]안의 price를 state로 넘기라고 했다.
coins가 null이 아니기 때문에 coins[0]의 요소들을 받아 올 수 있을 줄 알았는데 찾을 수 없다고 한다...

다음 진도를 나가야 하므로 이번 문제는 공부하면서 해결해 보는 것으로 마무리...😢

리엑트에서 셀렉트 만들때 자주 쓴다는 라이브러리 발견!
라이브러리를 이용해서 좀 더 발전시켜볼 수 있을 것 같다.
👉🏻디발자뚝딱님의 블로그
👉🏻react-select