[TIL] 220127

Lee Syong·2022년 1ė›” 27ėž
0

TIL

ëŠĐ록 ëģīęļ°
162/204
post-thumbnail

📝 ė˜Ī늘 한 ęēƒ

  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
profile
ëŠĨ동ė ėœžëĄœ ė‚īėž, 행ëģĩ하ęēŒðŸ˜

0개ė˜ 댓ęļ€