React: 코인 트래커 만들기 연습

summereuna🐥·2022년 2월 24일
React
0

React JS

목록 보기
16/69

📝 리액트 연습하기 위해 암호화폐 및 가격 나열하는 단순 프로젝트 만들기

🔥 Goal

  1. 앱에 들어오면 로딩 메시지 보여주기
  2. 코인들 나열 완료하면 로딩 메세지 숨기고 코인 리스트 보여주기

🔥 Hint

  • useState() 사용해 상태 관리
  • useEffect() 사용해 코드 실행 타이밍 관리
  • 코인 API 활용: https://api.coinpaprika.com/v1/tickers

🔥 My Task

2가지 state를 만들어보자.
먼저 로딩 state를 만들고 코인 api를 가져오자.

1. data 가져오기

import { useEffect, useState } from "react";

function App() {
  //✅ 2가지 state를 만들어보자.
  //✅ 1. 로딩, 기본 값 true인 state
  const [loading, setLoading] = useState(true);
  //코인 api 컴포넌트
  //처음 렌더되었을 때만 실행되도록 아무 state도 주시하지 않도록, 즉 [] 빈 어레이를 작성하면 된다.
  useEffect(() => {
    //코인 api를 fetch한다.
    //코인 api를 fetch하고 네트워크를 확인하면 request/response가 잘되고 있음을 확인할 수 있다.
    fetch("https://api.coinpaprika.com/v1/tickers");
  }, []);
  return (
    <div>
      <h1>The Coins!</h1>
      {loading ? <strong>Loading...</strong> : null}
    </div>
  );
}

export default App;

콘솔 > 네트워크 > 새로고침 후 tickers를 눌러보면 request 200 GET한 것을 알수 있다.
그리고 preview를 보면 코인이 json형태로 적혀 있는 것을 확인할 수 있다.

이 response로부터 코인의 json을 추출해 보자.

  • 코인 api를 페치한 후(then), response를 받아서 response.json을 return해 주면 된다.
  • 그러고 나서(then), 그 json을 가지고 콘솔로그를 반환해서 보자.
  useEffect(() => {
    fetch("https://api.coinpaprika.com/v1/tickers")
      .then((response) => response.json())
      .then((json) => console.log(json));
  }, []);


와우 쏘 매니...엄청 큰 배열을 반환한다.
이게 우리가 사용할 data이다.

이제 이 data를 component에서 보여주면 된다.

2. data를 state에 넣어 component에 data 보여주기

이 data를 component에서 보여주기 위해서는 이 data를 state에 넣으면 된다.

  1. 이제 두 번째 state를 만들어 보자.
  • const [coins, setCoins] = useState([]);
    코인 API의 데이터, 즉 코인 리스트 가지고 있는 state를 useState()로 만든다.
    기본 값으로는 빈 array를 주자.
  1. .then((json) => setCoins(json)
  • 코인 api를 페치한 후(then), response를 받아서 response.json을 return하면(then), 엄청 큰 배열 반환된다는 사실을 콘솔로그로 봤었다.
    그 json이 바로 코인 데이터 배열이기 때문에, 반환된 json의 값을 setCoins 모이파이어로 보내어 coins의 state 값을 업데이트하면 된다.
useEffect(() => {
    //코인 api를 페치한 후(then), response를 받아서 response.json을 return하면(then),
    //엄청 큰 배열 반환된다는 사실을 콘솔로그로 봤었다.
    //그 json === 코인 데이터 배열
    //따라서 반환되는 json의 값을 setCoins해서 coins에 값을 업뎃하면 된다.
    fetch("https://api.coinpaprika.com/v1/tickers")
      .then((response) => response.json())
      .then((json) => setCoins(json));
  }, []);
  1. coins 데이터 얻기를 끝냈으면, 동시에 loading의 state를 false로 바꿔야 한다.
useEffect(() => {
    fetch("https://api.coinpaprika.com/v1/tickers")
      .then((response) => response.json())
      .then((json) => {
        setCoins(json);
        setLoading(false);
      });
  }, []);

모디파이어 함수 사용해서 data를 바꿀 수 있다니 너무 멋지다! 🥺

이제 coins라는 변수에 코인들의 array가 담겨져 있다.
array.map()을 사용하여 array의 각 item을 component로 만들자.

3. array의 각 item을 component로 만들기

<ul>{coins.map((coin) => <li>{coin}</li>)}</ul>
  • array.map()사용하면 react.js는 element에 고유한 key를 줘야 했었는데, 여기서 index를 사용할 필요는 없다. 왜냐하면 코인 api를 보면 각 코인마다 고유한 id를 가지고 있기 때문이다.

  • coins 배열 안에 있는 각각의 coin의 사용할 항목을 중괄호 안에 넣어서 가져오면 된다.
      <ul>
        {coins.map((coin) => (
          <li>
            {coin.rank}. {coin.name}({coin.symbol}): {coin.quotes.USD.price} USD
          </li>
        ))}
      </ul>
  • 제목 옆에 코인이 몇 개인지 적어주자.
    coins 배열에 몇개가 들었는지 알아보려면 array.length를 사용하면 된다.
    <h1>The Coins! ({coins.length})</h1>
return (
    <div>
      <h1>The Coins! ({coins.length})</h1>
      {loading ? <strong>Loading...</strong> : null}
      <ul>
        {coins.map((coin) => (
          <li key={coin.id}>
            {coin.rank}. {coin.name}({coin.symbol}): {coin.quotes.USD.price} USD
          </li>
        ))}
      </ul>
    </div>
  );

❗️여기서 잠깐
const [coins, setCoins] = useState([]);
이때 coins state의 기본 값으로 빈 배열을 안 넣어두면 컴포넌트의 처음 시작 때 coins은 undefined이 된다. 그러면 loading할 때 에러 뜬다. 게다가 undefined은 length를 가질 수도 없다.
적어도 빈 배열 둬서 undefined 안되게 처리해 두자!

4. 결과

import { useEffect, useState } from "react";

function App() {
  //2가지 state
  //🌟 1. 로딩, 기본 값 true
  const [loading, setLoading] = useState(true);
  //🌟 2. 코인 API의 데이터, 즉 코인 리스트 가지고 있는 state, 기본 값 빈 array(코인 리스트 배열이라서)
  const [coins, setCoins] = useState([]);
  //✅ 코인 API: 컴포넌트 처음 렌더되었을 때만 실행: 아무 state도 주시하지 않으면 된다.
  useEffect(() => {
    //코인 api를 fetch하고 네트워크를 확인하면 request/response가 잘되고 있는 것을 확인 할 수 있다.
    //response로부터 코인의 json을 추출해 보자.
    //- 코인 api를 페치한 후(then), response를 받아서 response.json을 return해 주면 된다.
    //- 그러고 나서(then), 그 json을 가지고 콘솔로그 해보자.
    //결과는 엄청 큰 배열 반환된다. = 코인 데이터 배열
    //- 따라서 반환되는 json의 값을 setCoins해서 coins에 값을 업뎃시키자.
    //- 그리고 동시에 loading을 false로 바꿔줘야 한다.
    fetch("https://api.coinpaprika.com/v1/tickers")
      .then((response) => response.json())
      .then((json) => {
        setCoins(json);
        setLoading(false);
      });
  }, []);
  const [] = useState();
  return (
    <div>
      <h1>The Coins! ({coins.length})</h1>
      {loading ? <strong>Loading...</strong> : null}
      <ul>
        {coins.map((coin) => (
          <li key={coin.id}>
            {coin.rank}. {coin.name}({coin.symbol}): {coin.quotes.USD.price} USD
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

📝 Code Challenge

USD를 다른 코인으로 바꾸면 코인을 몇 개 살수 있는지 구하기

  • input 만들어서 20달러 가지고 있다고 적으면 BTC/이더리움/솔라나 등 으로 바꾸면 얼마인지 converter 만들기
  • ul 대신 select, li 대신 option으로 바꿔서 작성

my task

import { useEffect, useState } from "react";

function App() {
  //2가지 state
  //🌟 1. 로딩, 기본 값 true
  const [loading, setLoading] = useState(true);
  //🌟 2. 코인 API의 데이터, 즉 코인 리스트 가지고 있는 state, 기본 값 빈 array(코인 리스트 배열이라서)
  const [coins, setCoins] = useState([]);
  //🌟 3. usd 인풋 state
  const [usd, setUsd] = useState(0);
  //🌟 4. 선택한 코인 state
  const [pick, setPick] = useState(0);
  // usd 인풋에 입력한 값 받아와 usd 업데이트
  const usdChange = (event) => setUsd(event.target.value);
  // 픽한 코인 value(코인의 usd가격) 받아와 pick 업데이트
  const onSelect = (event) => {
    setPick(event.target.value);
  };
  //✅ 코인 API: 컴포넌트 처음 렌더되었을 때만 실행: 아무 state도 주시하지 않으면 된다.
  useEffect(() => {
    //코인 api를 fetch하고 네트워크를 확인하면 request/response가 잘되고 있는 것을 확인 할 수 있다.
    //response로부터 코인의 json을 추출해 보자.
    //- 코인 api를 페치한 후(then), response를 받아서 response.json을 return해 주면 된다.
    //- 그러고 나서(then), 그 json을 가지고 콘솔로그 해보자.
    //결과는 엄청 큰 배열 반환된다. = 코인 데이터 배열
    //- 따라서 반환되는 json의 값을 setCoins해서 coins에 값을 업뎃시키자.
    //- 그리고 동시에 loading을 false로 바꿔줘야 한다.
    fetch("https://api.coinpaprika.com/v1/tickers")
      .then((response) => response.json())
      .then((json) => {
        setCoins(json);
        setLoading(false);
      });
  }, []);
  return (
    <div>
      <h3>USD to Coins! {loading ? "" : `(${coins.length})개의 코인`}</h3>
      {loading ? (
        <strong>Loading...</strong>
      ) : (
        <div>
          <input
            value={usd}
            type="number"
            placeholder="USD"
            onChange={usdChange}
            min="0"
          ></input>
          $ 가 있으면{" "}
          <select onChange={onSelect}>
            <option>코인을 고르세요!</option>
            {coins.map((coin) => (
              <option key={coin.id} value={coin.quotes.USD.price}>
                {coin.name}({coin.symbol})
              </option>
            ))}
          </select>
          코인 <b>{pick ? `${usd / pick}` : "-"}</b>개를 살 수 있습니다.
        </div>
      )}
    </div>
  );
}

export default App;

결과

profile
summereuna🐥
Always have hope🍀 & constant passion🔥
이전 포스트

React: To Do List 만들기 연습

다음 포스트

React: 영화 앱 만들기 연습

0개의 댓글