[ReactJS] 코인api 로 데이터 가져오기(fetch, map)

fetch 안의 url의 쿼리문 limit 는 조절해주면 된다.

 

import { useState, useEffect } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]);
  useEffect(() => {
    fetch("https://api.coinpaprika.com/v1/tickers?limit=5000")
      .then((response) => response.json())
      .then((json) => {
        setCoins(json);
        setLoading(false);
      });
  }, []);
  return (
    <div>
      <h1>The Coins!</h1>
      {loading ? <strong> Loading... </strong> : null}
    </div>
  );
}

export default App;

함수를 이용해 변수값을 조절할 수 있는 것은 정말 강력하다. 

덕분에 setLoading(false)으로 로딩메세지를 생략할 수 있게 되었다.

 

이제 coins 라는 변수 안에 배열이 들어가 있다. 

무엇을 할 것이냐

array 가 있어 그럼?

바로 map! 을 활용할 것이다.

 

map 을 하면 ReactJS는 우리에게 element 에 key를 주도록 한다.

map은 array를 전체 순회하면서 각 element 마다 함수를 적용해서 그 값으로 대체 되게 한다. 자세한 내용 참조

https://mswait.tistory.com/118

[ReactJS] To Do List - 배열의 요소 가져오기- with .map

 

coin 은 coins array의 하나하나의 element를 의미한다.