https://api.coinpaprika.com/v1/tickers 에서 엄청나게 많은 코인을 넘겨준다. Wow~ 눈 아파~
useEffect(() => {
fetch("https://api.coinpaprika.com/v1/tickers")
.then((response) => response.json())
.then((json) => console.log(json));
}, []);
컴포넌트의 시작에서만 API를 호출할 수 있게 해주기 위해 useEffect를 사용하였다.
개발자모드에서 network -> 필터 클릭 -> tickers 클릭
이제 이 response로부터 JSON을 추출할 것이다.
콘솔로 찍어보면 API로 받은 2500개의 코인 배열이 나타난다!
각 원소는 객체로 이루어져있다.
-JSON으로 코인 '배열'을 받아올 것이므로 state의 디폴트로 빈 배열을 선언해줘야 한다 !
위는 되고 아래는 안된다.
const [coins, setCoins] = useState([]);
const [coins, setCoins] = useState();
<select>
{coins.map((coin) => (
<option key={coin.id}>
{coin.name} ({coin.symbol}): {coin.quotes.USD.price} USD
</option>
))}
</select>
map을 사용해서 각 코인의 이름, 심볼, 가격이 option에 나타나도록 해주었다.
.
.
const [initial, setInitial] = useState(0);
.
.
.
const onSubmit = (event) => {
event.preventDefault();
setInitial(0);
};
.
.
.
.
<select>
{coins.map((coin) => (
<option key={coin.id}>
{coin.name} ({coin.symbol})은 {initial}달러를 가지고 있으면{" "}
{initial / coin.quotes.USD.price}개 구입 가능!
</option>
))}
</select>
수중에 돈이 얼마 있는지 입력할 수 있는 input을 만들고 initial 투자 가능 금액이라는 의미에서 initial이라는 state을 지정해줬다.
initial을 코인의 가격으로 나눠주면 현재 내가 가진 금액으로 구매 가능한 코인의 개수가 나타난다!!!
이 부분은 니꼬쌤 설명 없이 내가 숙제로 직접 해본 부분이다. 히히 잘 뜨니까 보람차다!!!
이렇게 완성된 코드는
import { useEffect, useState } from "react";
function App() {
const [loading, setLoading] = useState(true);
const [coins, setCoins] = useState([]);
const [initial, setInitial] = useState(0);
const onChange = (event) => {
setInitial(event.target.value);
};
const onSubmit = (event) => {
event.preventDefault();
setInitial(0);
};
useEffect(() => {
fetch("https://api.coinpaprika.com/v1/tickers")
.then((response) => response.json())
.then((json) => {
setCoins(json);
setLoading(false);
});
}, []);
return (
<div>
<h1>The coins! {loading ? "" : `(총 ${coins.length}개) `}</h1>
{loading ? <strong>Loading...</strong> : null}
<h4>시세 확인</h4>
<select>
{coins.map((coin) => (
<option key={coin.id}>
{coin.name} ({coin.symbol}): {coin.quotes.USD.price} USD
</option>
))}
</select>
<h4>최초 투자 금액에 따른 코인 별 구입 가능 개수</h4>
<form onSubmit={onSubmit}>
<input
value={initial}
onChange={onChange}
type='number'
placeholder='가진 돈 얼마?'
></input>
<button>reset</button>
</form>
<select>
{coins.map((coin) => (
<option key={coin.id}>
{coin.name} ({coin.symbol})은 {initial}달러를 가지고 있으면{" "}
{initial / coin.quotes.USD.price}개 구입 가능!
</option>
))}
</select>
<h6>{initial}달러 밖에 없으면 적금이나 들어 애송아!</h6>
</div>
);
}
export default App;
완성된 사진은
마지막 h6 태그는 코인 투자로 목돈을 잃은 내 친구가 생각나서 만들어보았다.