8일차

7-2 coin tracker 만들기

이번 강의에서는 비트코인의 현재 가격을 볼 수 있는 api를 가져와 띄우는 실습을 했다.
그리고 그것들을 select로 만들어서 달러를 입력했을 때 얼마나 살 수 있는지 체킹할 수 있는 기능을 과제로 받았다.
아래는 내가 작성한 과제 코드이다.

• 전체 소스

import { useEffect, useState } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]);
  const [dollor, setDollor] = useState("");
  const [selected, setSelected] = useState("");
  const [num, setNum] = useState();
  const onChange = (e) => setDollor(e.target.value);
  const onClick = () => setNum(dollor / newValue);
  const handleSelect = (e) => setSelected(e.target.value);

  //select의 option에서  숫자만 가져오기
  const sign = selected.indexOf("$");
  const newValue = selected.slice(sign + 1, -3);

  //num 값이 바뀔 때 (버튼 누를 때) 콘솔 찍기
  useEffect(() => {
    console.log("newValue : ", newValue);
    console.log("dollor : ", dollor);
    console.log("num : ", num);
  }, [num]);

  //coin 목록 받아오기
  useEffect(() => {
    fetch("https://api.coinpaprika.com/v1/tickers")
      .then((response) => response.json())
      .then((json) => {
        setCoins(json);
        setLoading(false);
      });
  }, []);

  return (
    <div>
      <h1>The Coins! ({coins.length})</h1>
      {loading ? (
        <strong>Loading...</strong>
      ) : (
        <div>
          <select onChange={handleSelect} value={selected}>
            <option>select coin</option>
            {coins.map((coin) => (
              <option>
                {coin.name} ({coin.symbol}) : ${coin.quotes.USD.price} USD
              </option>
            ))}
          </select>
          <br></br>
          <br></br>
          <label>my dollor : </label>
          <input
            onChange={onChange}
            value={dollor}
            type="text"
            placeholder="write your dollor!"
          />
          <button onClick={onClick}>search</button>
          <br></br>
          <br></br>
          <h3>available for purchase : {num}</h3>
        </div>
      )}
    </div>
  );
}

export default App;

• 첫 화면

• 코인 선택 후

• 소스 설명

state가 총 5개 쓰였다.

먼저 loading은 코인을 성공적으로 받아오면 false 값으로 바꿔주어 <strong>Loading...</strong> 에서 실제 값이 뜨게 만드는 데에 사용되었다.

coins는 api로 받아온 json 형태의 코인값들이 담길 주머니의 역할을 한다.

! fetch는 무엇인가

useEffect(() => {
    fetch("https://api.coinpaprika.com/v1/tickers")
      .then((response) => response.json())
      .then((json) => {
        setCoins(json);
        setLoading(false);
      });
  }, []);

api를 가져오는 부분에서 fetch를 사용했다.
처음보는 함수였다.
fetch는 AJAX 방식의 최신버전의 기능이라고 한다.

fetch의 기본틀

fetch('http://52.78.213.9:3000/messages') //api url
.then(function(response) {
	return response.json();
  })
.then(function(json){
//json 형태로 전달받은 서버로부터의 응답
});
   

기본적인 fetch 사용법은 이러하다.
처음엔 낯설어서 어려워보였는데, 사실 사용하는데 어려움이 있는 코드는 전혀 아니었다.
api url 넣는 부분에 사용할 api url을 넣고 응답부분에서 미리 만들어뒀던 state에 담아주기만 하면 되는 것이다.

dollor는 input에 사용자가 입력한 값을 가져오기 위한 state다.
또한, 실제 몇 코인을 살 수 있는지 연산을 하는 데에도 필요하다.

selected는 select option중에서 실제로 고른 값을 가져오기 위해 사용했다.
단순하게, 가져온 값을 바로 사용한다면

이렇게 연산이 불가능한 값이 나와서 따로 숫자만 가져올 수 있게 가공하였다.

  const sign = selected.indexOf("$");
  const newValue = selected.slice(sign + 1, -3);

가공은 js로 단순하게 진행했다.
indexOf로 $의 위치값을 알아와서 slice로 +1을 해줘서 가져왔다.

마지막으로 num state는 연산한 값을 띄우는 데에 사용되었다.
const onClick = () => setNum(dollor / newValue);