[React] 암호화폐 나열 - API로부터 JSON 가져오기 예제(1) by useEffect, useState

암호화폐들과 그 가격들을 나열하는 간단한 react 프로젝트를 만들어보겠습니다. 페이지나 앱을 들어왔을 때 로딩메시지가 먼저 보이고 코인들이 나열되면 로딩 메시지를 숨기고 코인들을 리스트로 보여줄 것입니다. 코인리스트 데이터는 coinpaprika API (https://api.coinpaprika.com/v1/tickers) 에서 가져오겠습니다. coinpaprika API에서는 거의 8000개 정도의 코인을 넘겨주고 있습니다. 

 

#컴포넌트가 가장 처음으로 render되었을 때, API에서 코인리스트를 받아오고,  API로부터 코인리스트를 받아오는 동안 'Loading..'이 브라우저에 출력되고 코인리스트를 다 받아오면 문구가 사라지도록 할 것입니다. 우선 API에서 가져온 데이터를 콘솔창에 출력해보겠습니다.

import { useEffect, useState } from "react";

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

export default App;

결과

#api로부터  data를 가져와서 콘솔창에 출력했고 데이터를 다 가져오면 'Loading...'이라는 문구가 사라집니다.

 useEffect(()=>{
   fetch("https://api.coinpaprika.com/v1/tickers").then((response)=>
    response.json()
   ).then(json=>console.log(json));
  }, []);

 

#url을 fetch 했을 때는 네트워크탭에서 데이터를 request하고 response 한 것을 확인할 수 있습니다. 그리고 그 response로부터 이 json을 추출하는 것이 (response) => response.json()이고 그 json을 콘솔창에 출력했습니다.

 

이제 데이터를  coins라는 state에 담아서 컴포넌트에서 보여주겠습니다. coins 변수에 코인들의 array가 담기게 됩니다. map 함수를 사용해서 코인리스트를 출력하겠습니다.

import { useEffect, useState } from "react";

function App() {
  const [loading,setLoading]=useState(true);
  const [coins, setCoins]=useState([]);
  useEffect(()=>{
   fetch("https://api.coinpaprika.com/v1/tickers")
    .then((response) => response.json())
    .then((json)=>{
      console.log(json)
      setCoins(json);
      setLoading(false);
    });
  }, []);
  return (
    <div>
      <h1>The coins!</h1>
      {loading ? <strong>Loading...</strong> : null}
      <ul>
        {coins.map((coin)=>(
          <li>{coin.name} ({coin.symbol}) : ${coin.quotes.USD.price} </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

결과

 

 

#챌린지 : input을 만들어서 20달러를 가지고 있다면 얼만큼의 코인으로 줄 수 있는지 알려주기

 

최종코드

import { useEffect, useState } from "react";

function App() {
  const [loading,setLoading]=useState(true);
  const [coins, setCoins]=useState([]);
  useEffect(()=>{
   fetch("https://api.coinpaprika.com/v1/tickers")
    .then((response) => response.json())
    .then((json)=>{
      console.log(json)
      setCoins(json);
      setLoading(false);
    });
  }, []);
  return (
    <div>
      <h1>The coins! {loading?"":`(${coins.length})`}</h1>
      {loading ? <strong>Loading...</strong> : 
      <select>
        {coins.map((coin)=>(
          <option>{coin.name} ({coin.symbol}) : ${coin.quotes.USD.price} </option>
        ))}
      </select>}
    
    </div>
  );
}

export default App;