React #8

두개재 두개재 :3

✅ Create Coin Tracker(1)

• 암호화폐들과 그 가격을 나열하는 API 를 가져와 사용할 것

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

• 로딩중이라면 <h1>Loading...</h1> 메시지를 보여주고,
  만약 로딩중이 아니라면 null 로 처리
• coinpaprika API를 가져오자.(https://api.coinpaprika.com/v1/tickers?limit=10)
  그런데, 이제 딱 한번만 실행되고 마는

function App() {
  const [coins, setCoins] = useState([]);
  const [loading, setLoading] = useState(true);
   useEffect(()=>{
    fetch("https://api.coinpap...")
      .then((response) => response.json())
      .then((json) => {
        setCoins(json)
        setLoading(false);
      });
  }, [])
  return (
  	<div>
    	<h1>The Coins!</h1>
        {loading ? <h1>Loading...</h1> : null}
        <ul>
          {coins.map((coin) => 
            <li>
            	...
            </li>
          )}
        </ul>
  	</div>
  )
}

• 위에서 map()을 사용했으나 두번째 인자로 index 를 받지 않는 이유
  • json 파일 안에 있는 영화 정보중에 id 값이 있기 때문
    
• 이제 어떤 정보들을 보여줄지 작성해주자

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

• 이름(name), 심볼(symbol), 가격(quotes.USD.price)을 보여주기로함
  
• 짜잔

✅ Create Coin Tracker(2)

• 그리고 여기서부턴 코드챌린지
• 내가 가지고 있는 USD로 몇 개의 BTC, ETH, HEX..등을 살 수 있을지 확인할 수 있는 계산기.
• input 태그를 사용해 값을 넣고 결과를 볼 수 있도록 하자

function App() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]);
  const [money, setMoney] = useState(0);
  const onChange = (event) => {
    setMoney(event.target.value);
  };
  
  useEffect(()=>{
    fetch("https://api.coin...")
      .then((response) => response.json())
      .then((json) => {
        setCoins(json)
        setLoading(false);
      });
  }, [])
  return (
    <div>
      <h1>The Coins Tracker!</h1>
      <hr />
      <label>USD $
      <input
        placeholder="input your money"
        onChange={onChange}
        type="number"
        value={money}
      /> 
      → </label>
       <select>
          {coins.map((coin) => (
            <option>
            	{coin.name} ({coin.symbol}): You Can Buy
                {Math.round(money / coin.quotes.USD.price)}
            </option>
	   </select>
    </div>
  )
};

export default App;

• USD 를 입력하는 input 태그 옆에 <select>,<option> 을 사용하여 몇개의 btc, ETH 등을 살 수 있는지 볼 수 있게 했다.
• cool 😎