(React API 프로젝트) API Data Get + 출력

IRISH·2024년 5월 14일

API React 리액트

ReactJS-API-Project

목록 보기

1/8

실습일자 : 2024.05.14 ~ 2024.05.15

공공데이터 포털 사이트

https://www.data.go.kr/

충청북도 휴양림 Open API로 선정

충청북도_휴양림 정보
- https://www.data.go.kr/data/15097586/openapi.do

.env - api key 숨기기

REACT_APP_API_KEY=인증키

이미지와 같이, 전역폴더에 .env 파일 생성 후에 코드블럭과 같은 형식으로 인증키 넣어주기
코드 블럭
- REACT_APP_API_KEY (ㅇ) / REACT_APP_SERVICE_KEY (X)
- 인증키 양 옆에 작은 따옴표나 큰 따옴표 필요 없음

App.js

URL 선언

const URL =
  "http://apis.data.go.kr/6430000/cbRecreationalForestInfoService/getRecreationalForestInfo?serviceKey=";

[ http://apis.data.go.kr/6430000/cbRecreationalForestInfoService/getRecreationalForestInfo ]가 휴양림정보에서 설정한 Call Back URL
- 해당 정보는 공공데이터포털에서 ‘마이페이지 > 데이터 활용 > Open API > 활용신청 현황’의 [서비스정보 > 참고문서] 다운로드 후, 해당 참고문서의 Call Back URL에서 확인할 수 있음
위 Call Back URL 뒤에 [ ?serviceKey= ]를 붙여줘야 한다. 그래야, 나중에 API Data를 fetch할 때 params 중 하나로 serviceKey 에 인증키를 붙여주니깐!

serviceKey 변수 선언

const serviceKey = process.env.REACT_APP_API_KEY; // Get the API key from environment variables

.env 파일에서 생성한 REACT_APP_API_KEY 를 serviceKey 라는 변수에 할당

API 접근 및 param 설정

const response = await axios.get(URL, {
  params: {
    serviceKey: serviceKey,
    currentPage: 1,
    perPage: 4,
  },
});

axios 를 활용해 휴양림정보 API에 접근
URL 변수의 뒤에 serviceKey / currentPage / perPage 를 차례대로 할당
- 참고로, 이것도 참고문서에 존재하는 param의 명칭으로 하는 것이다!

return - html

⇒ 소스코드

return (
  <div className="App">
    <p>body 길이 : {data.body.length}</p>
    <p>header currentPage : {data.header.currentPage}</p>
    <p>휴양림명 : {data.body[0].NM}</p>
    <p>위치 : {data.body[0].LC}</p>
    <p>면적 : {data.body[0].AR}</p>
  </div>
);

첨부한 이미지처럼, API를 통해 가져온 데이터의 형식은 다음과 같았다.
body 길이나 header 안에 있는 currentPage 와 같은 값은 가져오기 쉬웠다. 반면, body 안에 있는 NM / LC / AR 등은 처음에 어떻게 갖고 와야할 지 막막했다.
하지만, body가 배열로 이루어져 있고, 이미지와 같이 [0] 이 되어 있으므로 소스코드에서도 body[0] 와 같이 하면 됐다.

⇒ 결과 화면

전체 소스 코드

App.js

import axios from "axios";
import { useState, useEffect } from "react";

const URL =
  "http://apis.data.go.kr/6430000/cbRecreationalForestInfoService/getRecreationalForestInfo?serviceKey=";

const serviceKey = process.env.REACT_APP_API_KEY; // Get the API key from environment variables

function App() {
  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: serviceKey,
          currentPage: 1,
          perPage: 4,
        },
      });
      setData(response.data);
    } catch (e) {
      setError(e);
    }
    setLoading(false);
  };

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

  // console.log("Service Key:", serviceKey); // Log the service key to the console

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error...</div>;
  if (!data) return null;

  console.log(data);
  //const name = data.body.items[0].NM;

  return (
    <div className="App">
      <p>body 길이 : {data.body.length}</p>
      <p>header currentPage : {data.header.currentPage}</p>
      <p>휴양림명 : {data.body[0].NM}</p>
      <p>위치 : {data.body[0].LC}</p>
      <p>면적 : {data.body[0].AR}</p>
    </div>
  );
}

export default App;