coin api 불러오기, useEffect()

coin의 정보를 가져올때, 렌더링시 단 한번만 가져오면 되기 때문에,

useEffect를 다음과 같이 이용한다.

useEffect(()=>{}, [])

[]인자에 아무것도 적지 않으면, 렌더링 후 딱 한번만 실행된다.

---

예시

상태값 coins에 api를 저장하고, coins.map을 통해 내부요소를 그려보는 코드다.

https://api.coinpaprika.com/v1/tickers

import React, { useEffect } from "react";

function App() {
  const [coins, setCoins] = React.useState([]);

  useEffect(() => {
    fetch("https://api.coinpaprika.com/v1/tickers")
      .then((response) => response.json())
      .then((json) => setCoins(json));
  }, []);
  
  console.log(coins);

  return (
    <div className="App">
    </div>
  );
}

export default App;

콘솔

fetch를 통해 성공적으로 불러와진걸 볼 수 있다.