[React] Movie-app Notes - Mini Apps (2) Coin Tracker

KAYAยท2021๋…„ 11์›” 11์ผ
0

[React] Movie-App

๋ชฉ๋ก ๋ณด๊ธฐ
10/11
post-thumbnail

๐Ÿ“’ 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;
profile
๊ฒ…๋ถ€ํ•˜์ž

0๊ฐœ์˜ ๋Œ“๊ธ€