Coin Tracker

• fetch() :  JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 함수.

  import React from 'react';
  import { useState, useEffect } from 'react' ;
  
  function App() {
  	const [loading, setLoading] = useState(true);
  	const [coins, setCoins] = useState([]);	 //가지고 있는 coin 데이터를 State로 가져오기 위함.
  	useEffect(() => {
  		fetch("https://api.coinpaprika.com/v1/tickers")
  		.then((response) => response.json())	//response를 받아서 response.json을 리턴.
  		.then((json) => {
  			setCoins(json);	//json에 coin 이라는 data를 가지고 있는 것. coins라는 변수에 coin의 array가 담김.
  			setLoading(false);	//coin얻기를 끝냈으면 loading을 멈춰줌.
  		})	
  	}, []); //두번째 argument 비워두면 첫번째 argument에 써진 게 처음 한번만 실행된다.
  	return (
  		<div>
  			<h1>The Coins! {loading ? "" : `(${coins.length})`}</h1>
  			{loading ? <strong>Loading...</strong> : (
  				<select>
  				{coins.map((coin) => <option>{coin.name} ({coin.symbol}): {coin.quotes.USD.price}</option>)} 
  			</select>
  			)}	
  			
  		</div>
  	);
  }
  //map사용 시 coin은 coins array에 있는 각각의 coin을 의미함.
  
  export default App;