[ReactJS로 영화 웹 만들기 ]6.coin tracker 만들기

이민선(Jasmine)·2022년 12월 14일
0
post-thumbnail

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 태그는 코인 투자로 목돈을 잃은 내 친구가 생각나서 만들어보았다.

profile
기록에 진심인 개발자 🌿

0개의 댓글