TIL day7 🚩

전체적인 프로세스에 집중하자! 전 비트코인 안하는데요....

오늘은 니꼬쌤과 함께 비트코인 tracker을 만들기로했다.

일단 만들어보았음니다..

coin tracker만들기!

import { useEffect, useState } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]);
  const [myMoney, setMyMoney] = useState([]);
  // 여기를 비어있는 배열로 두어서 undefied가 되지않도록한다.
  useEffect(() => {
    fetch("https://api.coinpaprika.com/v1/tickers")
      .then((response) => response.json())
      .then((json) => setCoins(json));
     setLoading(false);
  }, []); //이 부분이 빈 배열이면 이 코드는 한번만 동작함
  
 
  function onChange(event) {
    setMyMoney(event.target.value);
  }
  return (
    <div>
      <h1>The Coins!{loading ? "" : `(${coins.length})`}</h1>
      <input
        onChange={onChange}
        value={myMoney}
        type="number"
        placeholder="Please Write your USD"
      ></input>
      {loading ? (
        <strong>loading...</strong>
      ) : (
        <select>
          {coins.map((coin) => (
            <option>
              {coin.rank} ::
              {coin.name} ({coin.symbol}) <br />(
              {coin.total_supply}{" "}
              : $
              {coin.quotes.USD.price
                }
              )USD /
              {myMoney
                ? (myMoney / coin.quotes.USD.price)
                    
                : ""}
            </option>
          ))}
          ;
        </select>
      )}
    </div>
  );
}
export default App;

일단 이렇게 만들었는데 input에 비트코인으로 바꾸고싶은 달러의 값을 넣을 수 있는 기능을 만들라고 해서 생각해봤는데 ..
도무지 도무지!! 어떻게 넣어야할지 감이 잡히지 않았다..
항상 수동적으로 화면을 만들어서일까..
결국 다른 수강생꺼 카피함

근데 이렇게 만들다보니 소숫점과 자릿수가 너무 거슬려서 소숫점 정리하기로 했다.

react에서 소숫점 정리하기

import { useEffect, useState } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]);
  const [myMoney, setMyMoney] = useState([]);
  //여기를 비어있는 배열로 두어서 undefied가 되지않도록한다.
   useEffect(() => {
     fetch("https://api.coinpaprika.com/v1/tickers")
       .then((response) => response.json())
       .then((json) => setCoins(json));
     setLoading(false);
  }, []); //이 부분이 빈 배열이면 이 코드는 한번만 동작함
 
  function onChange(event) {
    setMyMoney(event.target.value);
  }
  return (
    <div>
      <h1>The Coins!{loading ? "" : `(${coins.length})`}</h1>
      <input
        onChange={onChange}
        value={myMoney}
        type="number"
        placeholder="Please Write your USD"
      ></input>
      {loading ? (
        <strong>loading...</strong>
      ) : (
        <select>
          {coins.map((coin) => (
            <option>
              {coin.rank} ::
              {coin.name} ({coin.symbol}) <br />(
              {coin.total_supply
                .toFixed(2)
                .toString()
                .replace(/\B(?=(\d{3})+(?!\d))/g, ",")}{" "}
              : $
              {coin.quotes.USD.price
                .toFixed(2)
                .toString()
                .replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
              )USD /
              {myMoney
                ? (myMoney / coin.quotes.USD.price)
                    .toFixed(2)
                    .toString()
                    .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
                : ""}
            </option>
          ))}
          ;
        </select>
      )}
    </div>
  );
}
export default App;

일단 이런식으로

 {coin.quotes.USD.price
                .toFixed(2)
                .toString()
                .replace(/\B(?=(\d{3})+(?!\d))/g, ",")}

이런식으로 {}안에 소숫점 두자리 뒤에는 잘라내고 천단위로 단위를 끊었다.
.toFixed() 이부분이 소숫점 몇번째 자리까지 잘라낼지
.toString() 이건 ,표를 찍기위해서 string 타입으로 변환
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") 3자리마다 따움표를 기능이다.

추가로 mymoney가 빈 값일 땐 mymoney의 값이 0.0으로 표기되고 있었는데 mymoney의 값이 없을 땐 빈 문자열로 출력되도록 if문을 추가했다.

loading화면이 정상적으로 구동되지 않을 때

이 모든 부분을 수정했는데 loading화면이 정상적으로 구동되지 않아서
useEffect부분을 다시 보니까 괄호를 잘못닫아서 그런거였다며~ 머쓱
ㅎㅎ

import { useEffect, useState } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]);
  const [myMoney, setMyMoney] = useState([]);
  // 여기를 비어있는 배열로 두어서 undefied가 되지않도록한다.
  // useEffect(() => {
  //   fetch("https://api.coinpaprika.com/v1/tickers")
  //     .then((response) => response.json())
  //     .then((json) => setCoins(json));
  //   setLoading(false);
  // }, []); //이 부분이 빈 배열이면 이 코드는 한번만 동작함
  useEffect(() => {
    fetch("https://api.coinpaprika.com/v1/tickers")
      .then((response) => response.json())
      .then((json) => {
        setCoins(json);
        setLoading(false); //괄호가 정상적으로 안닫혀서 setLoading이 정상적으로 구현되지 않아서 오류 발생함
      });
  }, []);
  function onChange(event) {
    setMyMoney(event.target.value);
  }
  return (
    <div>
      <h1>The Coins!{loading ? "" : `(${coins.length})`}</h1>
      <input
        onChange={onChange}
        value={myMoney}
        type="number"
        placeholder="Please Write your USD"
      ></input>
      {loading ? (
        <strong>loading...</strong>
      ) : (
        <select>
          {coins.map((coin) => (
            <option>
              {coin.rank} ::
              {coin.name} ({coin.symbol}) <br />(
              {coin.total_supply
                .toFixed(2)
                .toString()
                .replace(/\B(?=(\d{3})+(?!\d))/g, ",")}{" "}
              : $
              {coin.quotes.USD.price
                .toFixed(2)
                .toString()
                .replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
              )USD /
              {myMoney
                ? (myMoney / coin.quotes.USD.price)
                    .toFixed(2)
                    .toString()
                    .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
                : ""}
            </option>
          ))}
          ;
        </select>
      )}
    </div>
  );
}
export default App;