[React] UseEffect로 fetch API 요청하기

 

import React, {useState, useEffect} from 'react';

function Test() {
  const [weather, setWeather] = useState(0);

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

  const fetchData = async () => {
    let response = await (
      await fetch(
        'http://apis.data.go.kr/1360000/VilageFcstInfoService_2.0/getUltraSrtFcst?serviceKey={API Key}&numOfRows=10&pageNo=1&base_date=20220807&base_time=0630&nx=55&ny=127&dataType=JSON',
      )
    ).json();
    setWeather(response.response.body.items.item);
  };
  if (weather) {
    return <div>{weather.map(data => JSON.stringify(data))}</div>;
  }
}

export default Test;

• fetch로 전달받은 데이터는 state로 관리한다. 
• useEffect를 사용해서 렌더링 이후에 fetch가 호출되도록 한다.
• if문으로 전달받은 데이터가 있는 경우에만 렌더링 되도록 했다. 

https://designcode.io/react-hooks-handbook-fetch-data-from-an-api

React Hooks Handbook - Design+Code