React JS 공공데이터포털 미세먼지 API (한국환경공단 대기오염정보)이용하기

1. React Application 생성

위와 같이 dust-react라는 React Application를 생성한다. 참고로 create-react-app은 node 5.2.0 버전 이상부터 제공되는, 일회성 설치 옵션 npx를 사용하길 권장한다. 따라서 시작하기 전에 npm을 최신버전으로 설치하고, 위 스크립트를 실행한다.

create-react-app 공식문서

생성된 dust-react 하위 디렉토리 안에서 작업을 진행한다. 

 

2. 한국환경공단 에어코리아 OpenAPI 사용

OpenAPI는 공공데이터포털에서 제공하는, 한국환경공단_대기오염정보 API를 사용한다. 

공공데이터 포털

한국환경공단에서 제공하는 OpenAPI 활용가이드에 따라 응답 값 중 dataTime(측정일시), pm10value, pm10Grade, o3Value, o3Grade... 등을 사용한다.

또한 기본 XML 데이터이지만, 파라미터 (&_returnType=json)을 추가하여 JSON 데이터를 호출한다. 

2-1. App.js 예시

import React from "react";
import "./App.css";
import Dust from "./Dust";
import axios from "axios";

class App extends React.Component {
    state = {
        isLoading: true,
        data: {},
    };

    getDust() {
        const API_KEY = process.env.REACT_APP_API_KEY;
        const url = `/openapi/services/rest/ArpltnInforInqireSvc/getMsrstnAcctoRltmMesureDnsty?stationName=송파구&dataTerm=month&pageNo=1&numOfRows=10&_returnType=json&ServiceKey=${API_KEY}&ver=1.3`;
        // console.log(url);
        axios.get(url).then((response) => {
            const data = response.data.list[0];
            console.log(data);

            this.setState({
                isLoading: false,
                data: data,
            });
        });
    }
    componentDidMount() {
        this.getDust();
    }

    render() {
        const { isLoading, data } = this.state;

        return (
            <section className="container">
                {isLoading ? (
                    <div className="loader">
                        <span className="loader_text">Loading...</span>
                    </div>
                ) : (
                    <div className="dustInfo">
                        <Dust
                            date={data.dataTime}
                            pm10val={data.pm10Value}
                            pm10gr={data.pm10Grade}
                            pm25val={data.pm25Value}
                            pm25gr={data.pm25Grade}
                            o3val={data.o3Value}
                            o3gr={data.o3Grade}
                            coval={data.coValue}
                            cogr={data.coGrade}
                            no2val={data.no2Value}
                            no2gr={data.no2Grade}
                        />
                    </div>
                )}
            </section>
        );
    }
}

export default App;

App.js 에서는 axios로 openapi JSON 데이터를 받아온다. (물론 axios를 사용하기 전에 npx install axios와 같이 axios를 설치해야 한다.)

.get(url).then => 에서 setState로 data를 받아오고, isLoading 값을 false로 설정한다. 

 

2-2. React API Key 숨기기

여기서 API URL과 API Key 관련 설정해야 하는 부분이 있는데(CORS, API Key 보안 문제), 이에 대해서는 다음 포스트에서 다루겠다.

React JS API Key(키) 숨기기

 

(잘 보면 const url = `/openapi/services/rest/ArpltnInforInqireSvc/getMsrstnAcctoRltmMesureDnsty?stationName=송파구&dataTerm=month&pageNo=1&numOfRows=10&_returnType=json&ServiceKey=${API_KEY}&ver=1.3`;와 같이 선언하였다. )

 

render() 의 return 문 안에서 삼항연산자를 이용해 isLoading 값이 true라면 "Loading..." 만을 return하고 isLoading 값이 false라면 (JSON 값 불러오기가 완료되었다면) Dust.js의 컴포넌트 <Dust /> 를 호출해 화면을 띄울 수 있게 한다. 

2-3. Dust.js 예시

import React from "react";
import "./Dust.css";

function Grade({ grade }) {
  console.log({ grade });
  switch (grade) {
    case "1":
      return <b style={{ color: "blue" }}>좋음!</b>;
      break;
    case "2":
      return <b style={{ color: "green" }}>보통</b>;
      break;
    case "3":
      return <b style={{ color: "orange" }}>나쁨!</b>;
      break;
    case "4":
      return <b style={{ color: "red" }}>매우 나쁨!!</b>;
      break;
  }
}

function Dust({
  date,
  pm10val,
  pm10gr,
  pm25val,
  pm25gr,
  o3val,
  o3gr,
  coval,
  cogr,
  no2val,
  no2gr,
}) {
  // console.log(id);
  return (
    <div className="Dust">
      <h3>송파구의 현재 대기질 현황: </h3>
      <div className="date">측정일시 : {date}</div>
      <p className="10">
        PM10 : <b>{pm10val}</b>μg/m³
        <br />
        grade: <Grade grade={pm10gr} />
      </p>
      <p className="25">
        PM25 : <b>{pm25val}</b>μg/m³
        <br />
        grade: <Grade grade={pm25gr} />
      </p>
      <div className="flex">
        <p>
          오존
          <br />
          {o3val}ppm
          <br />
          <Grade grade={o3gr} />
        </p>
        <p>
          일산화탄소
          <br />
          {coval}ppm
          <br />
          <Grade grade={cogr} />
        </p>
        <p>
          이산화질소
          <br />
          {no2val}ppm
          <br />
          <Grade grade={no2gr} />
        </p>
      </div>
    </div>
  );
}

export default Dust;

 

함수형 컴포넌트 Dust 에서는 받은 값들을 양식에 맞게 return하고 Grade 함수를 이용해 각 단계마다의 색깔을 설정해 준다. 

 

3. 완성본 예시

CSS 스타일시트까지 적용해주면 다음과 같이 결과가 나오는 것을 확인할 수 있다. 

전체 코드는 아래 GitHub Repo에서 확인할 수 있다. 

kevink1113/dust-react