<React> 공공데이터 API 불러오기(한국도로공사 OpenAPI)

 

목차

 

# 목표 자료 살펴보기

##공공데이터 API키 발급 받는 방법

1. 환경설정

 1-1 node.js 설치

 1-2 리액트 설치

 1-3 Axios 설치

2. 공공데이터 API 불러오기

 2-1 App.js

 2-2 Traffic.js

 

#목표 자료 살펴보기

http://data.ex.co.kr/

고속도로 공공데이터 포털

고속도로 공공데이터 포털에서 일자별 전국 교통량을 조회 및 리액트로 불러온다.

 

들어가보면 요청 변수와 출력 값에 대한 명세가 간략하게나마 나와있다.

 

더 자세하게 알고 싶다면 Help센터의 OpenAPI 가이드문서를 받아서 사용한다.

 

구분 코드들을 한 페이지에서 그 상세정보를 알수 있다면 좋겠지만 그 정보를 dataSet>교통데이터다운로드를 통해서 알 수 있다.

 

http://data.ex.co.kr/portal/fdwn/commonCode?requestfrom=dataset&serviceType=&keyWord=&searchDayFrom=2014.12.01&searchDayTo=2017.01.17&CATEGORY=TR&GROUP_TR=COD_STD&docuTitle=%EA%B3%B5%ED%86%B5%EC%BD%94%EB%93%9C%20%EB%B0%8F%20%EA%B8%B0%EC%A4%80%EC%A0%95%EB%B3%B4

고속도로 공공데이터 포털

 

먼저 예제 실행을 통해서 어떠한 형태의 API를 제공하고 있는지 살펴본다.

예제 코드를 API키를 발급받지 않고도 바로 실행해 볼 수 있는 기능을 제공하고 있다.

Request Parameter에서 빨간색으로 되어 있는 key, type, sumDate 는 반드시 입력해야 하는 값들이다.

key 값은 'test' 그대로 두고 type은 리액트에서 다루기 편하게 json 타입, sumDate는 아무 날짜나 집어넣어보자

필자는 '20211112'를 작성하였다.

 

그리고 URL보기 를 누르면 그에 대한 'Get'방식의 URL을 제공해준다. 예제 실행하기를 누르면 아래에 예제실행결과에 그 결과가 나오는데 상세를 눌러보자.

대충 이런 식으로 나온다는 것을 알았다. 그렇다면 바로 리액트로 값을 받아와 보자.

 

## 인증키발급

OpenAPI > 인증키발급에 들어가서 양식을 작성하면 이메일을 통해서 즉시 인증키가 발급됩니다.

 

1. 환경설정

 

*리액트를 설치하지 않았다면 아니시라면 그냥 넘어가셔도 좋습니다.

 

1-1 node.js 설치

먼저 node.js를 설치해 줍니다.

https://nodejs.org/ko/download/

다운로드 | Node.js

이 곳에서 자신의 PC에 맞는 버전을 다운받아 설치해 주시면 됩니다.

 

설치이후에 버전 확인을 하시어 잘 나온다면 설치가 완료된 것입니다.

 1-2 리액트 설치

npx create-react-app my-app

cd my-app

npm start
를 cmd 창에 작성해줍니다.

1.npx create-react-app my-app

-> 리액트 프로젝트 폴더를 만듭니다. 이 과정에서 react에 필요한 패키지들을 설치합니다.

2. cd my-app

-> 만들어진 리액트프로젝트 폴더에 들어갑니다.

3. npm start

->React 앱을 실행 합니다.

 

1-3 axios 설치

npm install axios

cmd에 작성하여 실행하여 axios를 설치합니다.

 

2. API 불러오기

1.App.js

import React from "react";
import axios from "axios";
import Traffic from "./Traffic";
 
 
class App extends React.Component{
 
  state = {
    isLoading:true,
    data:[],
    
  };
 
 
  getTraffic(){
   
    const url = `http://data.ex.co.kr/openapi/trafficapi/nationalTrafficVolumn?key=발급받은API키입력8&type=json&sumDate=20211101&exDivCode=00`;
    console.log(url);
    axios.get(url).then((Response) =>{
      const data = Response.data.list;
      console.log(data);
 
      this.setState({
        isLoading:false,
        data:data
      });
    });
  }
  componentDidMount(){
    this.getTraffic();
  }
  render(){
    const {isLoading, data} = this.state;
 
    return(
      <section className="container">
        {isLoading ? (
          <div className="loader">
            <span className="loader_text">Loading...</span>
          </div>
        ):(
          <div className="trafficInfo">
            {data.map((d,cnt)=>{
            return(<Traffic
              sumDate={data[cnt].sumDate}
              exDivCode={data[cnt].exDivCode}
              tcsType={data[cnt].tcsType}
              carType={data[cnt].carType}
              trafficVolumn={data[cnt].trafficVolumn}/>)
            })}
          </div>
        )}
      </section>
    )
  }
}
export default App;
 

state에 data를 리스트로 초기화 해줍니다.

 

예제코드에서 봤던 URL을 참조하여 url을 작성해줍니다.

axios를 통해 url로 response 값을 받아옵니다.

데이터 형식이 list 안에 저장되어 있음으로 data 값을 reponse.data.list로 지정해줍니다.

그렇다면 지금 data안에는 리스트가 저장되어있습니다.

 

그래서 render에 return 값에서 map으로 callback함수를 사용하여 배열안의 요소들을 정렬해줍니다.

 

2. Traffic.js

import React from "react";
 
function Traffic({
    exDivCode,
    tcsType,
    carType,
    sumDate,
    trafficVolumn
}){
    return(
        <div className="traffic">
            <h3>일자별 교통량 현황</h3>
            <div className="date">측정일시:{sumDate}</div>
            <div className="exDivCode">집계주체구분:{exDivCode}</div>
            <div className="tcsType">하이패스/일반구분:{tcsType}</div>
            <div className="carType">차종구분:{carType}</div>
            <div className="trafficVolum">수량:{trafficVolumn}</div>
        </div>
    );
}
export default Traffic;
 

Traffic.js로 페이지 상에 출력될 양식을 지정해줍니다.

 

[실행결과]