[React] 공공데이터포털 API 사용법 (React + axios로 데이터 가져오기)

React + axios로 데이터 가져오기

 

---

 

목차

들어가며

공공데이터포털 API 준비하기

react + axios로 API 호출하기

 

---

 

 

---

[들어가며]

개인 프로젝트를 진행하면서 API가 어떻게 동작하는지 이해하지 못했었다.

"직접 써보는 게 제일 빠르지 않을까?"라는 생각이 들어 공공데이터포털의 캠핑장 API를 사용해 보기로 했다.

 

---

[공공데이터포털]

공공데이터포털에 로그인을 한다. [바로가기]

공공데이터포털 메인화면

 

로그인을 해주어야 한다.

공공데이터포털 로그인 화면

 

로그인 후 마이페이지에 들어간다.

다음과 같은 화면이 나타난다.

지금 필요한 것은 내가 사용할 API와 개인 API 인증키가 필요하다.

공공데이터포털 마이페이지

 

<개인 API 인증키란?>

API와 API 사용자 사이클을 연결해 주는 역할을 한다.

개인 API 인증키란?

 

 

사용하고 싶은 API에서 활용 신청을 클릭한다.

내가 사용한 API : https://www.data.go.kr/data/15101933/openapi.do

공공데이터포털 API 활용신청

 

활용신청을 클릭하면 다음과 같은 화면이 나타난다.

활용신청 버튼 클릭 후 화면

 

스크롤을 내려서 활용목적 선택 폼을 입력해야 한다.

저는 다음과 같이 입력해 주었습니다.

활용목적 선택 폼 입력

활용목적 선택 폼 입력

 

폼을 다 입력한 후 활용신청을 클릭한다.

신청은 금방 된다.

처리중 화면

 

마이페이지에 들어가면 아래와 같은 화면이 나온다.

마이페이지 화면으로 개인 API 인증키를 얻은 것을 알 수 있다.

공공데이터포털 마이페이지 개인 API 인증키를 발급 받은 화면

 

마이페이지 > 데이터 활용 > Open API > 활용신청 현황 클릭 > 승인된 API 클릭

마이페이지 API 활용신청 현황

 

API 인증키를 확인할 수 있다.

API 인증키 발급 상태

 

활용신청 상세기능정보에서 미리 보기를 통해 확인할 수 있다.

이 부분에서 프론트에서 요청변수를 어떻게 활용해야 하는지를 알 수 있다.

활용신청 상세기능정보

활용신청 상세기능정보 요청변수

 

개발계정 상세보기에서 상세 설명 클릭

개발계정 상세보기 > 상세설명 클릭

 

이 화면에서 스크롤을 내린다.

오픈 API 상세 화면

 

상세 기능 > API목록 > baseList 클릭

API 목록의 baseList

 

openAPI 실행준비 클릭

API 실행준비 클릭

 

MobileOS, MobileApp, serviceKey를 입력

이때 serviceKey는 인코딩으로 넣으면 된다.

MobileOS, MobileApp, ServiceKey를 입력

 

입력을 완료하면 OpenAPI호출을 클릭

다음과 같은 화면이 나타난다.

OpenAPI 호출 클릭

 

---

[ react + axios로 API 호출하기 ]

먼저 API 요청을 위해 axios를 설치한다.

npm install axios

 

API 인증키는 보안을 위해 코드에 직접 작성하지 않고. .env파일에 따로 관리한다.

React에서는 환경변수 이름이 반드시 REACT_APP_ 으로 시작해야한다.

REACT_APP_API_KEY=인증키

 

이제 React에서 axios를 사용하여 공공데이터포털 API를 호출해 보자

import axios from "axios";
import { useEffect, useState } from "react";
function App() {
    const [data, setData] = useState(null);
    const apiData = async () => {
        const API_URL = `https://apis.data.go.kr/B551011/GoCamping/basedList?numOfRows=10&pageNo=1&MobileOS=ETC&MobileApp=WebApp&serviceKey=${process.env.REACT_APP_API_KEY}&_type=JSON`; //api url
        try {
            const response = await axios.get(API_URL);
            setData(response?.data?.response?.body?.items?.item);
            console.log("##res", response);
        } catch (err) {
            console.log("error : ", err.message);
        } finally {
            console.log("Loading...");
        }
    };
    console.log("data : ", data);
    useEffect(() => {
        apiData();
    }, []);
    return <>API 연동하기</>;
}
export default App;

 

프로젝트를 실행한 후 개발자 도구 콘솔을 확인하면 API를 통해 받아온 데이터를 확인할 수 있다.

API 연결 성공

 

---

잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊

댓글과 좋아요는 큰 힘이 됩니다!

 

[ 참고자료 ]

 

[memo]

흑흑 게시글을 작성만해두고 업로드를 하지 않았다는걸 지금에야 알았다. ㅠㅠ

밀린 게시글들 차근차근 다시 업로드를 해보자!