React + axios를 사용하여 공공데이터 휴일 호출하고 출력하기 (feat.postman)

이번 글에선 리액트에서 사용하는 대표적인 fetch라이브러리인 axios에 대해 알아보고 직접 공휴일 데이터를 호출해보겠습니다.

 

이번 글에선 공공데이터포털에서 휴일데이터를 받아와 출력해주는 프로젝트를 만들어보겠습니다.

또 리따배에서 만든 달력 프로젝트에 휴일을 표시하는 기능을 넣어주는 것도 좋을 것 같습니다.

 

우선 대부분 api는 get또는 post 방식으로 호출하게 되는데요. 이 둘의 차이를 먼저 간단하게 확인해보겠습니다.

 

get과 post알아보기

api를 호출할 때 대표적으로 사용하는 방식인 get과 post에 대해 알아보겠습니다.

 

1. get

 특징 : url뒤에 매개변수를 적어 서버에 전달한다.

https:localhost/getdata?name=doyeon&age=29&nickname=doyeonism

위 예시와 같이 name이라는 변수, age라는 변수, nickname이라는 변수를 '&'를 이용해 구분하여 보내주고 있습니다.

 

공공데이터에서 휴일을 호출해보겠습니다.

https://apis.data.go.kr/B090041/openapi/service/SpcdeInfoService/getHoliDeInfo?serviceKey=공공데이터포털에서 제공해주는 서비스키 입력&solYear=2022&solMonth=12

12월 25일, 기독탄신일, 휴일이라고 정보를 출력해줍니다.

 

 

2. post

특징 : body에 매개변수를 적어 서버에 전달한다.

post는 get과 다르게 브라우저에서 url을 입력해 바로 호출할 수 없기 때문에 postman을 이용해 api를 호출합니다.

아래 사이트에서 테스트용 api를 제공합니다. 아래 사이트에서 제공하는 api를 이용해서 post출력을 해볼게요.

JSONPlaceholder - Free Fake REST API

 

url : https://jsonplaceholder.typicode.com/users

body값은 title:web과 body:today와 같이 아무런 값을 json형식으로 만들고 api를 호출하여 

다음과 같은 데이터를 받아볼 수 있었습니다.

데이터를 잘 받았습니다.

post방식은 get과 다르게 url뒤에 파라미터값을 넣는 것이 아니라 body안에 파라미터를 넣어 보내주는 방식으로 통신을합니다.

 

 

 

 

공공데이터 공휴일 출력하기

공공데이터는 get형식으로 데이터를 호출해야합니다. 곧바로 리액트에서 호출해 변수에 저장해보겠습니다.

npx를 이용해 apicall이라는 리액트 프로젝트를 생성해줍니다.

 

yarn add axios
yarn add -D @types/axios

axios와 axios type을 설치해줍니다.

 

axios type을 왜 -D (devDependencies)에 설치하는지 궁금해하시는 분들이 있으십니다. 이는 따로 관련 글을 올리겠습니다.

 

axios를 설치했다면 이제 url을 호출해주면 됩니다.

/apicall에 .env파일을 만들어줍니다.

꼭 루트폴더에 생성해줘야합니다.

.env파일엔 서비스키를 다음과 같은 변수이름으로 적어줍니다.

REACT_APP_변수이름

위와 같은 형식으로 저장해주셔야합니다.

 

api를 호출하는 코드를 짜보겠습니다.

import React, { useEffect, useState } from "react";
import "./App.css";
import axios from "axios";

const requestData = {
  url: `https://apis.data.go.kr/B090041/openapi/service/SpcdeInfoService/getHoliDeInfo?`,
  serviceKey: process.env.REACT_APP_SERVICE_KEY,
  solYear: 2022,
  solMonth: 12,
};

type Data = {
  dataKind: string;
  dataName: string;
  isHoliday: string;
  locdate: number;
  seq: number;
};

const App = () => {
  const [holiday, setHoliday] = useState<Data[]>();

  const getData = async () => {
    try {
      const response = await axios.get(
        `${requestData.url}ServiceKey=${requestData.serviceKey}&solYear=${requestData.solYear}&solMonth=${requestData.solMonth}`
      );

      setHoliday(response.data.response.body.items.item);
    } catch (e) {}
  };

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

  return (
    <>
      <p>{holiday ? holiday[0].locdate : `nodata`}</p>
    </>
  );
};

export default App;

 

setHoliday로 api호출을 통해 받아온 데이터를 holiday에 넣어줍니다.

기본 holiday값은 undefined이므로 p태그에 3항 연산자를 통해 holiday를 올바르게 출력해줍니다.

 

문제가 생겼습니다.

공휴일이 2개 이상인 달을 출력하면 배열 형식으로 데이터를 주지만 12월 같이 공휴일이 하루밖에 없는 날엔 단순히 객체형식으로 보내주더군요.

10월 공휴일 3개

12월 공휴일 1개

 

 

추가연산이 필요했습니다.

 

concat을 통해 일관성있는 배열을 만들었습니다.

concat안에 배열([1,2,3])을 넣어주는 것과 단순히 하나의 값(1)을 넣어주는 것의 결과값이 1차원 배열로 똑같습니다.

이런 특성을 이용해 아래와 같이 코드를 변경해줬습니다.

const getData = async () => {
  try {
    const response = await axios.get(
      `${requestData.url}ServiceKey=${requestData.serviceKey}&solYear=${requestData.solYear}&solMonth=${requestData.solMonth}`
    );

    const saveData = [].concat(response.data.response.body.items.item);

    setHoliday(saveData);
  } catch (e) {}
};

 

 

실제로 출력도 잘 되는 것을 확인할 수 있었습니다.

 

지금까지 axios사용 방법으로 공공데이터포털에서 공휴일을 받아오는 코드를 살펴봤습니다.

다음 프로젝트에선 저번 리따배에서 만든 달력 프로젝트에 공휴일을 표시해주는 프로젝트를 진행해보도록 하겠습니다.