[React] URL fetch하기 | 코인 정보 불러오기

학습일 : 2023. 03. 18

---

 

오늘 해볼 것

1. URL fetch 해보기

2. 코인 정보 (코인이름, 가격, 순위 등) 불러오기

 

시작

 

 

 

<App.js>

URL fetch를 위해서 

"https://api.coinpaprika.com/v1/tickers" 를 적어줄 건데,

useEffect를 통해 사이트가 로딩 되자마자 딱 한번만 로딩해줄 것이기 때문에

빈배열을 적어준다.

 

fetch를 하고

fetch 한 것이 응답으로 오면 그 응답을 json으로 리턴해주고

리턴 된 json 값을 setCoins 를 통해 coins가 되도록 해주고

모든 값이 다 로딩되었다면 setLoading(false); 하여 true=> false로 만들어서 로딩중일때만 나오는

"Loading..." 문구를 나오지 않게 만들어준다.

 

 

"https://api.coinpaprika.com/v1/tickers" 에 들어가면

우리가 불러올 값들을 볼 수 있는데

예를들자면 .name  .symbol   .rank 등이 있다.

잘 살펴보고 불러올 값을 적용해보면 되겠다.

 

import { useEffect, useState } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]); // default는 빈배열, data를 coins로 둠
  useEffect(() => {
    // fetch를 한다. then을 써서 응답을 받아서 response.json을 리턴해준다.
    fetch("https://api.coinpaprika.com/v1/tickers") // URL fetch
      .then((response) => response.json()) //URL fetch 한걸 응답을 받아 json으로 리턴
      .then((json) => {
        setCoins(json); // 리턴한 json값을 setCoins 해줌
        setLoading(false); // setCoins 해주었기 때문에 (다 불러왔기 때문에) 로딩을 false로 바꾸어주기
      });
  }, []); // [] 적어주어 한번만 로딩되고 끝

  return (
    <div style={{fontFamily: "'Gowun Dodum', sans-serif",
    color:"rgb(255,255,255)", backgroundColor:"rgb(0,0,0)" }}>
      <h1 style={{margin:"0"}}>The Coins! (총 {coins.length}개)</h1>
      {loading ? <strong>loading...</strong> : null}{" "}
      {/*로딩 중일때 loading...가 표시됨 아닐때는 문구가 사라짐*/}
      <ul>
        {/*  index가 필요없는 이유 : ID를 갖고 있기 때문에 key를 ID로 써도 되기 때문
           첫번째 리스트로 name을 보여주고 싶기 때문에 coins.name을 작성해준다.
           coin은 coins array안에 있는 각각의 coin을 의미한다. */}
        {coins.map((coin) => (
          <li>
            {coin.rank} {/*코인 랭킹*/}
            {"위 : "}
            {coin.name} ({coin.symbol}) : ${coin.quotes.USD.price} USD  {/*이름 (심볼) : 가격 USD*/}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

 

 

 

실행결과

 

 

아주 잠깐이지만

새로고침 했을 때 

Loading... 문구가 출력됨을 알 수 있다.