[ React Native ] 캘린더 공휴일 데이터 API

공휴일 데이터를 관리자 페이지에서 공공데이터포털 api를 활용헤서 저장후

이걸 가져와서 처리할까 고민했지만

무료로 사용할 수 있는 것이 있어서 해당 라이브러리를 사용하기로했다.

 

git에 해당 라이브러리가 있었고,

국내 공휴일 데이터를 쉽게 가져올 수 있길래, 이를 활용했다.

https://github.com/kyungseopk1m/holidays-kr

GitHub - kyungseopk1m/holidays-kr: [NPM] 🇰🇷 South Korea Public Holidays / 대한민국 공휴일 데이터

---

Install

npm i @kyungseopk1m/holidays-kr

 

---

Useage

우선 데이터를 처음 로딩시에 캐싱을 하기 위해서
store에 처음 로딩시에 저장

 

파라미터로 년도만 보내서 처음 로딩시에는 오늘날짜를 가져와서 올해의 데이터를 가져와서 캐싱하고,

이후에는 캘린더에서 년도가 바뀔때마다 해당 월의 년도도 캐시되도록 년도를 파라미터로 받아서 처리

import {create} from "zustand/react";
import {holidays} from '@kyungseopk1m/holidays-kr';

interface AppState {
	//...
    // 휴일 정보 캐싱
    holidayMap: Record<string, string>
    loadHolidays: (year: number) => Promise<void>
}

export const useAppStore = create<AppState>((set,get) => ({
	//...
    holidayMap: {},
    loadHolidays: async (year) => {
        const list = await holidays(String(year))

        const map: Record<string, string> = {}

        list.data.forEach((h) => {
            map[h.date] = h.name
        })
        console.log(map)

        set((state) => ({
            holidayMap: {
                ...state.holidayMap,
                ...map,
            },
        }))
    },
}))

 

이후 처음 앱 로딩시에 초기화작업하는 함수에 store의 loadHolidays를 호출해서 올해 휴일 데이터를 캐싱

 const initialized = async () => {
        /* 휴일 정보 로딩 */
        await appStore.loadHolidays(dayjs().year())

        setReady(true)
    }

    useEffect(() => {
        setReady(false)

        initialized()
    }, [])

 

이후 console을 찍어보면 올해의 휴일 데이터를 가져와서 캐싱된 것을 확인할 수 있다.