#7.2 Coin Tracker

• select에 있는 값을 가져오고 싶다면 onChange함수를 사용한 후, option의 value값을 지정해주면 useState함수에서  set함수를 사용해서 가져오면 된당
• 함수가 1,2,3,4,5가 있다면
  • 동기함수는 1끝나고 2, 2끝나고 3 이런식으로 순차적으로 진행하고 
  • 비동기함수는 순서와 상관없이 완성된 쪽이 실행결과를 return 
• fetch함수는 비동기적으로 처리되는 함수, fetch가 끝나기도 전에 다른 함수가 먼저 실행될 수 있기 때문에 then을 써서 순서를 고정시킴
  • then은 fetch끝나고 나서 실행해줘!라는 뜻이당

fetch('api 주소')
.then(res => res.json())
.then(res => {
  // data를 응답 받은 후의 로직
});

import { useEffect, useState } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]) //비어있는 array로 두면 undefined됨
  const [money, setmoney] = useState(0)
  const [selectCoin, setSelectCoin] = useState(0)
  const onChange=(event)=>{
    setmoney(event.target.value);
  };
  const changeValue = (event)=>{
    setSelectCoin(Math.floor(money/event.target.value));
  }
  useEffect(() => {
    fetch("https://api.coinpaprika.com/v1/tickers")
      .then((response => response.json()))
      .then((json) => {
        setCoins(json);
        setLoading(false);
      });
  }, []);
  console.log(money);
  console.log(selectCoin);
  return (
    <div>
      <h1>The Coins! {loading ? "" : `(${coins.length})`}</h1>
      {loading ? <strong>loading...</strong> : ""}
        <div><input onChange={onChange} value={money}/></div>
      <select onChange={changeValue} >
        {coins.map((coin) => (//coin은 coins array안에 있는 각각의 coin의미
          <option key={coin.id} value={coin.quotes.USD.price}>
            {coin.name} ({coin.symbol}) : ${coin.quotes.USD.price} USD
          </option>
        ))}
      </select>
      <h3>{selectCoin}개 구매가능</h3>
    </div>
  );
}

export default App;