📒 Nomad Coder ReactJS로 영화 웹 서비스 만들기
강의노트 (2021 Updated ver.)

---

# 9. Coin Tracker

혹시 지나가다 보시는 분, 왜 안되는 지 알려주실 수 있다면 정말 감사드리겠습니다...^___^..

근데 option id값은 아무리 해도 추출이 안되는데 왜 그런지 제발 알 고 싶 ㅓyo,...

id 값이 잘 들어갔는데~~ 있는데 이걸 어떻게 가져와야 되는 걸까요?..

---

Final Code w/ HW

아우.. 너무 어렵ㄸ ㅏ!~!
강의 들을 땐 다 이해하고 알겠는데 막상 혼자 하려니까 우째야 될지 어리벙벙...
그래도 포기 안 하구 해 냈다..ㅇㅑ호~!

import React from "react";
import { useState, useEffect } from "react";

function App() {
    const [loading, setLoading] = useState(true); // 로딩 데이터
    const [coins, setCoins] = useState([]); // 코인 리스트를 잠시 홀딩하기 위함

  // My code 
    const [money, setMoney] = useState("");
    const [selectedCoin, setSelectedCoin] = useState(0);
    const onChange = (e) => {
        setMoney(e.target.value);
    };
    const onSelect = (e) => {
        setSelectedCoin(e.target.value);
        // console.log(e.target.id); :***이게 틀린건 아닌거 같은데 왜 value는 조회가 되는데 id는 안되는 건지...?
    };

    useEffect(() => {
        fetch("https://api.coinpaprika.com/v1/tickers")
            .then((response) => response.json())
            .then((json) => {
                setCoins(json.slice(0, 20));	// 스택오버 에러떠서 일단 20개로 자름
                setLoading(false);
            });
    }, []);
    // console.log(coins);

    return (
        <div>
            <div>
                <h1>The Coins Ranking TOP {coins.length}</h1>
                {loading ? (
                    <strong>Loading...</strong> //로딩이면
                ) : (
                    //로딩이 끝나면
                    <select onChange={onSelect}>
                        <option>
                            ====== Choose what u want ! ======
                        </option>
                        {coins.map((coin) => (
                            // coin이 id값을 가지고 있기 때문에 index가 아니라 id를 활용해서 만들어줌
                            <option
                                key={coin.id}
                                id={coin.name} // ???왜 도대체 접근이 안되는거임
                                value={coin.quotes.USD.price}
                            >
                                {coin.name} ({coin.symbol}) : $
                                {coin.quotes.USD.price.toFixed(3)} USD
                            </option>
                        ))}
                    </select>
                )}
            </div>
        
     	   // my code
            <br /> <hr />
            <div>
                <label htmlFor="have">
                    <h1>YOU HAVE</h1> $
                </label>
                <input
                    id="have"
                    onChange={onChange}
                    value={money}
                    placeholder="Money.."
                    type="number"
                ></input>
                <label htmlFor="buy">
                    <h1>YOU CAN BUY</h1>
                </label>
                <input
                    // onChange={onChange}
                    id="buy"
                    value={
                        money === "" || Infinity
                            ? "0"
                            : Math.floor(money / selectedCoin)
                    }
                    disabled
                ></input>
                Coins..
            </div>
        </div>
    );
}

export default App;