[리액트 따라하며 배우기] 달력 프로젝트2 달력에 공휴일 표시하기 React+typescript, axios

이번 프로젝트는

[리액트 따라하며 배우기] 달력 프로젝트 React+typescript, styled-components

위 프로젝트에서 추가기능을 생성한 프로젝트입니다.

위 프로젝트를 먼저 따라와주신 후 이번 프로젝트를 진행해주시면 되겠습니다.

 

이번 프로젝트는

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

위글에서 axios를 사용해보고 변수에 저장까지 한 공휴일을 달력프로젝트에 표시해주면 어떨까하는 생각에 시작하게 되었습니다.

 

완성된 프로젝트는 다음과 같습니다.

12월 25일 공휴일로 빨갛게 표시된게 보이시나요?

이번 프로젝트에서 추가한 기능입니다.

 

순서는 이렇습니다.

1. axios를 통해 공휴일 데이터를 공공데이터포털에 호출한다.

2. 모든 데이터를 배열로 전달해주지 않기 때문에 배열로 우선 저장한다.

3. 저장된 배열을 useState로 저장한다.

4. props drilling으로 날짜를 출력해주는 컴포넌트로 props를 내려준다.

5. 출력하는 날짜가 공휴일 데이터에 포함된다면 color:red스타일을 추가해준다.

 

위 순서로 개발을 진행합니다.

1. axios를 통해 공휴일 데이터를 공공데이터포털에 호출한다.

코드는 다음과 같습니다.

우선 공공데이터포털에서 준 servicekey를 .env폴더에 저장합니다.

 

.env에 있는 변수를 이용한 get url을 만들어 axios에 담아 호출합니다.

 

 

bodyData라는 변수는 공공데이터포털에 호출할 때 필요한 정보를 모두 담고 있습니다.

url,servicekey,solyear,solmonth를 담고 있습니다.

 

2. 모든 데이터를 배열로 전달해주지 않기 때문에 배열로 우선 저장한다.

공공데이터포털는 데이터의 형식이 다르게 데이터를 보내줬습니다. 만약 11월 공휴일이 하루밖에 없을 경우 단순히 객체로 값을 전달해주고 2개 이상일 경우 배열로 값을 전달해줬습니다.

 

이렇게 데이터 타입이 다를 경우 실행 후 오류를 뱉을 수 밖에 없는데요.

저는 빈 배열에 받은 데이터 값은 concat으로 합쳐 해결했습니다.

 

3. 저장된 배열을 useState로 저장한다.

holiday라는 useState에 데이터를 저장해줬습니다.

 

 

4. props drilling으로 날짜를 출력해주는 컴포넌트로 props를 내려준다.

DateBox컴포넌트에 holiday를 전달해줬습니다.

전달받은 holiday를 holidayLocDate에 string형식으로 다시 저장했습니다.

이는 nowDate(Date형식)과 공휴일 데이터를 비교하려고 이런 과정을 거쳤습니다.

 

각 날짜(allDay에 있는 날짜 각각)를 holiday인지 확인해줍니다.

day가 holidayLocDate에 포함된 날짜다?

그럼 index값이 호출됩니다. 이 index값은 holidayLocDate에 day가 위치한 index입니다.

없다면 -1이 출력됩니다.

 

이를 boolean값으로 저장해주고(isHoliday)

AllDay에 보내줍니다.

 

5. 출력하는 날짜가 공휴일 데이터에 포함된다면 color:red스타일을 추가해준다.

 

AllDay컴포넌트안에 styled-components의 porps로 isHoliday를 넘겨주고 만약 isHoliday가 true이면 color를 red로 해준다.

 

간단한 개발순서는 위와 같습니다.

디테일한 소스를 보시려면 깃허브를 방문해주세요.

깃허브 : https://github.com/jdy0120/frontendproject/tree/master/calender

GitHub - jdy0120/frontendproject

 

 

 

 

긴 글 읽어주셔서 감사합니다.