Coin Tracker API을 이용해서 랜더링하기

CoinTracker 라는 API를 이용해서 전세계 Coin을 불러와보자

최종본

APP.js
import React, { useEffect, useState } from "react";

const App = () => {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]);
  useEffect(() => {
    fetch("https://api.coinpaprika.com/v1/tickers")
      .then((response) => response.json())
      .then((json) => {
        setCoins(json);
        setLoading(false);
      });
  }, []);

  return (
    <div>
      <h1>The Coins {loading ? null : `${coins.length}`}</h1>

      {loading ? (
        <strong>Loading</strong>
      ) : (
        <select>
          {coins.map((coin) => { 
            return (
              <option key={coin.id}>
                {coin.name}({coin.symbol}) : {coin.quotes.USD.price}
              </option>
            );
          })}
        </select>
      )}
    </div>
  );
};

export default App;

---

우선 알아야할 개념

- fetch

fetch()의 프로미스는 서버에서 헤더를 포함한 응답을 받는 순간 정상적으로 이행한다.


JSON 파일을 가져와서 콘솔에 출력합니다. 가장 단순한 형태의 fetch()는 가져오고자 하는 리소스의 경로를 나타내는 하나의 인수만 받습니다. 응답은 Response (en-US) 객체로 표현되며, 직접 JSON 응답 본문을 받을 수는 없습니다.

Response (en-US) 객체 역시 JSON 응답 본문을 그대로 포함하지는 않습니다. Response는 HTTP 응답 전체를 나타내는 객체로, JSON 본문 콘텐츠를 추출하기 위해서는 json() (en-US) 메서드를 호출해야 합니다. json()은 응답 본문 텍스트를 JSON으로 파싱한 결과로 이행하는, 또 다른 프로미스를 반환합니다.


fetch('http://example.com/movies.json')
  .then((response) => response.json())  // response.json()메서드를 호출하면 JSON 데이터를 javascript 객체로 변환한다.
  .then((data) => console.log(data)); // 변환된 것을 data로 임명? 한 뒤 console.log를 해보자

- 3항 연산자

<h1>The Coins {loading ? null : `${coins.length}`}</h1>
loading 값이 true이면 null을 랜더링하고, false 이면  coins.length를 보여달라는 뜻

 {loading ? (
        <strong>Loading</strong>
      ) : (
        <select>
          {coins.map((coin) => {
            return (
              <option key={coin.id}>
                {coin.name}({coin.symbol}) : {coin.quotes.USD.price}
              </option>
            );
          })}
        </select>
      )}
      loading 값이 true이면, 화면에 loading이 랜더링되고,
        false 이면 coins를 map으로 돌린 것들을 랜더링해라
        
        

- map 함수

coins(이미 위에서 fetch를 통해 api로 coin 정보들을 받아옴)에서 map을 돌린다음
배열 반복문을 랜더링 시킨다.

여기서 map 함수는, 반복되는 컴포넌트 및 배열을 랜더링 하기위해 사용하는 자스의 내장함수로
배영 내 각 요소를 내가 원하는 규칙에 따라 변환 후, 새로운 배열에 생성을 한다.