리액트 공공데이터 API 가져오기

 

공공데이터 포털

 

 

 

import React from "react";

import axios from "axios";

import { useState, useEffect } from "react";

export default function Api() {

  const URL =

    "http://apis.data.go.kr/1360000/VilageFcstInfoService_2.0/getUltraSrtNcst";

  const [data, setData] = useState(null);

  const [loading, setLoading] = useState(false);

  const [error, setError] = useState(null);

  const fetchData = async () => {

    try {

      setError(null);

      setData(null);

      setLoading(true);

      const response = await axios.get(URL, {

        params: {

          serviceKey:

            "개인키 넣기~~~~~~~~~~~~",

          pageNo: 1,

          numOfRows: 1000,

          dataType: "JSON",

          base_date: "20230820",

          base_time: "0600",

          nx: 55,

          ny: 127,

        },

      });

      setData(response.data);

    } catch (e) {

      setError(e);

    }

    setLoading(false);

  };

  useEffect(() => {

    fetchData();

  }, []);

  if (loading) return <div>Loading...</div>;

  if (error) return <div>Error: {error.message}</div>;

  if (!data) return null;

  return (

    <div>

      <pre>{JSON.stringify(data, null, 2)}</pre>

    </div>

  );

}