React.JS) 6. 간단한 Coin Tracker 만들기

1. Coin Tracker

• 암호화폐 가격을 추적하고 관리하는 애플리케이션이나 웹사이트

• 자신의 포트폴리오를 관리하고, 가격 변동을 확인하고, 트렌드를 분석할 수 있음

2. 간단한 Coin Tracker 만들기

• 단순히 암호화폐들과 가격을 나열

• useEffect를 이용ㅠ ㅜㅜ

• 페이지나 앱에 들어왔을 때 로딩 메세지가 표시

• 코인들이 나열되면 로딩 메세지를 숨기고 리스트로 표시

3. 초기 상태

import { useState } from "react";

function App() {
 
  return (
    <div>
    </div>
  );
}

export default App;

3. Coin 데이터 가져오기

• 로딩 화면 만들기

import { useState } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  return (
    <div>
      <h1>The Coins</h1>
      {loading ? <strong>Loading ...</strong> : null}
    </div>
  );
}

export default App;

• api 요청해서 데이터 받아오기

https://api.coinpaprika.com/v1/tickers

import { useEffect, useState } from "react";

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

export default App;

• 가져온 데이터를 json으로 만들어서 콘솔에 표시하기

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;

5. 데이터를 화면에 표시하기

• 가져온 데이터를 state에 넣기

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) => 
      setCoins(json));
      setLoading(false);
  }, []);
  return (
    <div>
      <h1>The Coins</h1>
      {loading ? <strong>Loading ...</strong> : null}
    </div>
  );
}

export default App;

• map을 이용하여 coins 배열 안에 있는 coin들 표시하기

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) => {
        setCoins(json);
        setLoading(false); 
      });
  }, []);

  return (
    <div>
      <h1>The Coins</h1>
      {loading ? <strong>Loading ...</strong> : null}
      <ul>
        {coins.map((coin) => (
          <li key={coin.id}>{coin.name} ({coin.symbol}): {coin.quotes.USD.price} USD</li> 
        ))}
      </ul>
    </div>
  );
}

export default App;

6. 마무리하기

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) => {
        setCoins(json);
        setLoading(false); 
      });
  }, []);

  return (
    <div>
      <h1>The Coins({coins.length})</h1>
      {loading ? <strong>Loading ...</strong> : null}
      <ul>
        {coins.map((coin) => (
          <li key={coin.id}>{coin.name} ({coin.symbol}): {coin.quotes.USD.price} USD</li> 
        ))}
      </ul>
    </div>
  );
}

export default App;