[실습] How many coins I can buy

요구사항 정의

• useEffect를 사용하여 api는 1회만 불러오기
• api 불러오는 동안은 로딩화면 노출하기
• 내 자산과 코인을 선택하면 구매 가능한 코인 개수 알려주기

작성 코드

알게된 점

• option의 변경을 감지하려면 option의 부모요소인 select에 onChange 이벤트를 걸어주어야 한다.
• useState의 초기값으로 초기값을 추적할 수 있다. (당연한데 나는 몰랐쥐 🫠)

import { useEffect, useState } from 'react';

function Coin() {
    const [isLoading, setIsLoading] = useState(false);
    const [coins, setCoins] = useState([]);
    const [asset, setAsset] = useState();
    const [getCoin, setGetCoin] = useState(0);
    const onChangeAsset = (event) => setAsset(event.target.value);
    const onChangeGetCoin = (event) => setGetCoin(event.target.value);

    useEffect(() => {
        setIsLoading(true);
        fetch('https://api.coinpaprika.com/v1/tickers')
            .then((res) => res.json())
            .then((res) => {
                setCoins(res);
                setIsLoading(false);
            });
    }, [])

    return (
        <div>
            <h1>The Coins ({coins.length})</h1>
            <div>
                <input
                    type="text"
                    placeholder='Enter your asset here'
                    value={asset}
                    onChange={onChangeAsset} />
            </div>
            {isLoading ? <h3>Loading...</h3> : <select onChange={onChangeGetCoin}>
                {coins.map((el) => <option
                    key={el.id}
                    value={el.quotes.USD.price}>
                    {el.name}({el.symbol}): ${el.quotes.USD.price}
                </option>)}
            </select>}
            <div>
                YOU CAN BUY: {(asset !== undefined && getCoin > 0) ? (Number(asset) / getCoin).toFixed(3) : null}
            </div>
        </div>
    )
}

export default Coin