[React] DatePicker를 이용해 달력 기능 구현하기.

📕 0. 기술 블로그 포스팅 이유

 

요즘 SSAFY에서 진행하는 특화 프로젝트와 신한은행 해커톤 대회 2개의 프로젝트를 동시에 진행중인데,

2개 프로젝트 모두 달력을 사용하기 때문에 달력 기능에 대해 정리해보려고 한다.

이번에 달력을 구현하면서 'mui-DatePicker' , 'react-calendar', 'react-datepicker',

총 3개의 라이브러리를 번갈아가면서 사용했었는데

오늘은 그중에서 가장 괜찮았다는 생각이 들었던 'react-datepicker'라는 라이브러리에 대해 정리해보려고 한다.

 'react-datepicker' 는 주간 다운로드 수가 150만에 근접할 정도로 많은 사람들이 사용하며,

업데이트가 꾸준히 되는 좋은 라이브러리이다.

다른 달력 라이브러리보다 직관적이고 다양한 옵션을 제공해 주기에

확장성이 좋은 것 같아서 내 프로젝트에서는 React-DatePicker를 사용하기로 결정했다. 

 

 

📕 1. 설치

npm i react-datepicker

공식문서에 보면 'npm i react-datepicker'로 설치하라고 명시되어 있다.

나 같은 경우 '아 이렇게 하면 되는구나~' 하고 따라 했는데  아무리 해도 적용이 되지 않아서 나랑 팀원 모두 여기에 시간을 많이 까먹었다. 

 

npm install react-datepicker date-fns
npm install --save-dev @types/react-datepicker

그래서 열심히 구글링해 본 결과, TypeScript를 사용하는 경우

devDependencies에 @types/react-datepicker를 같이 설치해 주어야 사용할 수 있다는 사실을 알았다.

혹시나 내 블로그를 평소에 보는 사람은 달력을 사용할 일이 있을 때,

나와 같은 이유로 시간을 소비하지 않으면 좋겠다.

 

 

---

 

📕 2. 설치 이후 사용 방법

 

import DatePicker from 'react-datepicker'; // 사용할 곳에서 DatePicker를 import
import 'react-datepicker/dist/react-datepicker.css'; // css파일을 불러와야 달력이 덜 못생김.
import {ko} from 'date-fns/esm/locale'; // 한국어 사용을 위해 불러오자.

먼저, 달력을 사용할 컴포넌트에서 DatePicker와 css파일, 그리고 한국어 사용을 위한 locale을 불러온다.

 

<DatePicker
    locale={ko} // 한국어로 설정
    dateFormat="yyyy년 MM월 dd일" // 날짜 형태
    shouldCloseOnSelect // 날짜를 선택하면 datepicker가 자동으로 닫히는 옵션.
    selected={selectedDate}
    onChange={(e) => {
      const formattedDate = dayjs(e).format('YYYY-MM-DD');
      setSelectDate(formattedDate); // 달력에서 날짜를 선택했을 때 선택한 날짜를 변환해서 상태에 저장
    }}
    minDate={new Date('2000-01-01')} // minDate 이전 날짜 선택 불가
    maxDate={new Date()} // 오늘 이후는 달력에서 선택 불가능함.
    includeDates={includeDates} // 여기에 변환한 Date 객체를 전달하면 그 Date 객체들만 달력에서 선택 가능함.
    inline // 달력이 기본적으로 보여지는 옵션 ( 기본 옵션은 인풋창을 눌러야 달력이 나옴. )
/>

이후 <DatePicker> </DatePicker>로 달력을 렌더링 하면 된다.

내가 진행하고 있는 해커톤 프로젝트에서는 아이가 '일기'를 작성한 날에만 일기를 읽을 수 있도록 설정해야 하는데, 이 부분은 DatePicker의 추가 옵션을 활용해서 구현했다.

 

 

예시로, 일기를 쓴 날짜가 담겨있는 리스트가 있다고 가정하자.

 

  const includeDates = diaryList.map((diary) => new Date(diary.date)); //날짜들을 map함수를 사용해 Date 객체로 변환!

이 리스트에서 date값들을 뽑아내 includeDates라는 변수에 담는다.

 

이후 DatePicker의 includeDates라는 옵션에 이 값을 담으면 

 

이런 식으로 해당 날짜에만 클릭할 수 있도록 설정된다.

 

React-DatePicker를 도입하기 전에는 'MUI'에서 제공하는 datePicker를 사용하고 있었는데,

거기서는 어떻게 해야 위에 처럼 할 수 있는지 한참 고민했었다.

다행히 React-DatePicker를 찾았고, 편리한 옵션 덕에 기능을 구현할 수 있었다.

 

이처럼 DatePicker는 다양한 옵션을 제공해 주기 때문에 위에 적힌 거 빼고 추가로 필요한 건

공식문서를 참고하면 많은 도움이 될 듯하다.

 

 

---

 

 

📕 3. 문제점

하지만 DatePicker에는 한 가지 큰 문제점이 존재한다.

 

그건 바로 달력이 못생겼다.

공식문서에서 캡처해 왔는데, 배경색이 없는 모습을 생각하면 달력이 예쁜 편은 아니다.

 

왼쪽 : FlowBite에서 제공 / 오른쪽 : Mui에서 제공

다른 라이브러리에서 제공하는 달력에 비해 조금 못생기긴 했다.

그래서 진행 중인 프로젝트에 맞게 달력 디자인을 커스텀을 해야 하는데

커스텀을 하는 과정을 찾아보니 쉽지만은 않아 보였다.

 

그래도 프로젝트를 끝맺음하려면 디자인을 해야 하기 때문에 열심히 시도해 보고

다음 게시글에서는 디자인 커스텀에 대해 블로그를 써보도록 해야겠다