📝 오늘 한 것

1. coin trakcer

📚 배운 것

1. PRACTICE

2) coin tracker

(1) useState, useEffect

처음 앱에 들어왔을 때 로딩 메시지를 보여주고 코인들이 나열되면 로딩 메시지를 숨긴 후 코인들을 정리된 리스트로 보여주도록 해야 한다.

import { useState, useEffect } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]);

  // 컴포넌트가 처음 생성됐을 때 fetch를 이용해 요청을 보낸 후 응답을 받아온다
  useEffect(() => {
    fetch("https://api.coinpaprika.com/v1/tickers")
      .then((response) => response.json())
      .then((data) => {
        setCoins(data);
        setLoading(false); // 이때 loading 변수의 값도 바꿔야 한다
      });
  }, []);

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

export default App;

(2) USD ↔ BTC 단위 변환

앞에서 배운 내용 복습

const [amount, setAmount] = useState(0);
const [flipped, setFlipped] = useState(false);

const onChange = (event) => setAmount(event.target.value);
const onFlip = () => {
  setFlipped((prev) => !prev);
  reset();
};
const reset = () => setAmount(0);

return (
  <div>
    // 중략
    <div>
      <input
        value={!flipped ? amount : amount * 36955}
        onChange={onChange}
        placeholder="USD"
        type="number"
        disabled={flipped}
      />
      <input
        value={flipped ? amount : amount * 0.000027}
        onChange={onChange}
        placeholder="BTC"
        type="number"
        disabled={!flipped}
      />
    </div>
    <button onClick={onFlip}>Flip</button>
    <button onClick={reset}>Reset</button>
    <hr />
    // 중략
  </div>
);

✨ 내일 할 것

1. PRACTICE