Coin Tracker

Coin Tracker

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 ( The Coins! {loading ? "" : `(${coins.length})`} {loading ? Loading... : ( {coins.map((coin) => {coin.name} ({coin.symbol}): {coin.quotes.USD.price})} )} ); } //map사용 시 coin은 coins array에 있는 각각의 coin을 의미함. export default App;

from http://jieunny.tistory.com/20 by ccl(A) rewrite - 2021-12-26 16:01:43