[리액트] 노마드코더 코인트래커(Coin Tracker) 복습

초보자의 입장에서 적은 내용으로, 틀리거나 정확하지 않을 수 있습니다.

 

[리액트] 노마드코더 코인트래커(Coin Tracker) 복습

공부 기간 : 22/03/30

 

---

import { useState, useEffect } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState([]);
  const [price, setPrice] = useState();
  const [money, setMoney] = useState("");
  useEffect(() => {
    fetch("https://api.coinpaprika.com/v1/tickers")
      .then((response) => response.json())
      .then((json) => {
        setData(json.slice(0, 100));
        setLoading(false);

        // console.log(data)
        // 여기서 console.log(data) 하면 빈 배열 나오는 이유는, setState자체도 비동기이기 때문이다.
      });
  }, []);

  const onSelect = (event) => {
    setPrice(event.target.value);
  };

  const onSubmit = (event) => {
    event.preventDefault();
  };
  const onChange = (event) => {
    setMoney(event.target.value);
  };

  return (
    <>
      <h1>
        {loading ? (
          <span>loading</span>
        ) : (
          <div>
            <select onChange={onSelect}>
              {data.map((coin, index) => (
                <option key={coin.rank} value={coin.quotes.USD.price}>
                  {index}. {coin.id}
                </option>
              ))}
            </select>
            <form onSubmit={onSubmit}>
              <input
                placeholder="보유달러"
                value={money}
                onChange={onChange}
              ></input>
            </form>
            <hr />
            <h2>코인 가격 :{price}dollors</h2>
            <h2>구매 가능 개수 : {money / price}</h2>
          </div>
        )}
      </h1>
    </>
  );
}

export default App;

해결방안 

1. 데이터를 fetch한다. json형식으로 바꿔서 state에 데이터를 저장한다. 
2. 데이터 fetch가 완전히 끝나면 loading state를 false로 바꿔준다.
3. loading이 true 이면 로딩문구, false면 컴포넌트 출력한다.
4. 내가 보유한 돈과 그 돈으로 살 수 있는 코인의 개수를 구해준다.

 

라고 생각하고 시작했습니다.

 

 

비고

1. 월요일, 화요일 이틀에 걸쳐 동기 비동기부분을 공부했더니 fetch API로 데이터를 받아오는데에 큰 무리가 없었다.

2. 받아온 data는 객체를 포함하는 배열타입의 데이터이므로 map을 통해 select box 내부의 option으로 각각 넣어줬는데 익숙치 않아서인지 이 부분에서 꽤 오랜시간 헤맸다.

*memo

- map 태그는 2개의 파라미터를 받을 수 있다. 첫번째 파라미터는 엘리먼트이고, 두번째 파라미터는 인덱스이다. 인덱스는 선택사항.