Date Picker Library 비교 분석

Date Picker Library  비교 분석

 

들어가며...

프로젝트에서 장소 예약을 위해 날짜와 시간을 선택할 수 있도록 하는 기능을 개발하게 되었습니다.

이 부분을 더 효율적으로 개발하기 위해 라이브러리를 사용하기로 했고,

여러 후보군 중 프로젝트에 가장 적합한 라이브러리가 무엇인지 비교해보고 결정하기로 했습니다.

이번에 라이브러리들을 찾아 비교해보면서 느낀 것은

각각의 라이브러리들 모두 기본적으로 필요한 기능들을 갖추고 있으며 대체로 비슷한 수준이었습니다.

따라서 구현하고자 하는 기능에 따라 적합하다의 기준이 달라질 수 있습니다.

아래의 내용들은 주관적인 견해임을 감안해 참고만 하시기를 바랍니다. 

 

---

 

구현하고자 하는 기능

• 날짜 선택
• 특정 범위 한정으로 날짜 선택 제한
• 시간 선택
• 예약 가능 시간에 한하여 선택

고려사항

• data input custom 가능 여부 → 서버에서 예약 가능한 데이터 리스트를 받아 출력하는 기능이 필요
• style custom 가능 여부
• react 지원 여부
• 라이센스 , 안정성
• 지속적인 업데이트 여부
• 범용성 → 참고 자료의 양

라이브러리 후보군

1. react-datepicker
2. react-calendar
3. react-day-picker
4. Material-UI date and time pickers
5. Ant Design date-picker

각각의 특징 정리

1. react-datepicker

• License: MIT
• Weekly downloads : 1,786,206
• Last 7 Days downloads : 32,653
• Last publish: 1 month ago
• 장점
  • 가장 범용적으로 사용돼서 레퍼런스 많음
  • 기본 제공 props가 다양함
  • include option을 활용하여 서버 데이터로 날짜 및 시간 출력이 가능
  • 지속적인 업데이트
  • 스타일 커스텀 자유도가 높음
• 단점
  • 특별한 단점을 찾지 못했다.
• 개인적인 의견
  • 커스텀 자유도가 높고 공식문서를 통한 style custom이 쉽다는 점이 장점이라고 생각한다. 또한 가장 다운로드 수가 많고, 지속적인 업데이트가 이루어지고 있다는 점에서 이슈가 발생 했을 때 대처가 비교적 용이하다는 점 또한 선택에 이유가 되었다.

2. react-calendar

• License: MIT
• ver: 4.2.0
• Weekly downloads: 460,473
• Last 7 Days downloads : 32,653
• Last publish: 1 month ago
• 장점
  • UI가 심플하다.
  • 기본 제공 props가 다양하다.
• 단점
  • 타임테이블 없이 달력 기능만 제공한다.
  • data input을 통한 커스텀 기능이 없다.
• 개인적인 의견
  • 기본적으로 제공되는 style이 깔끔해서 커스텀을 하지 않는다면 장점이 되겠지만, 프로젝트에서는 스타일 커스텀을 하기때문에 별로 장점이라고 생각되지 않는다. 또한 타임 테이블 기능을 사용할 수 없다는 점과 data input을 사용하지 못한다는 점에서 적합하지 않다고 판단했다.

3. react-day-picker

• License: MIT
• Version : 8.7.1
• Weekly downloads: 756,125
• Last 7 Days downloads : 33,733
• Last publish: 1 month ago
• 장점
  • 범용적으로 사용
  • 공식문서가 잘 정리 되어있다.
  • UI적으로 다양한 옵션들을 제공한다.
  • 스타일 커스텀이 가능하다.
• 단점
  • 특정 범위를 지정하여 날짜 선택 제한하기 기능이 없다.
  • 타임 테이블 기능이 없다.
  • 패키지 사이즈 885kb로 상대적으로 크다.
• 개인적인 의견
  • 다른 라이브러리와는 차별화된 복수 선택과 관련된 다양한 UI 옵션을 제공하고 스타일 커스텀의 자유도가 높다는 점이 장점이라 간단한 날짜 예약 기능을 구현할 때 유용할 것 같다. 하지만 타입테이블기능을 미지원하고 data input custom이 안된다는 점에서 아쉬웠다. 또한 특정 범위를 지정하여 선택을 제한하는 기능이 없어 해당 프로젝트에는 적합하지 않다고 판단했다.

4. Material-UI date and time pickers

• License: MIT
• 장점
  • MUI 호환성
  • 바로 적용이 가능한 심미적인 UI style
  • UI적으로 다양한 옵션들을 제공한다.
  • 다양한 props들을 지원
• 단점
  • 특정 범위를 지정하여 날짜 선택 제한하기 기능이 없다.
• 개인적인 의견
  • 프로젝트에서 MUI를 사용하고 있다면 충분히 사용을 고려할 만큼 UI적으로 우수하다. 다양한 스타일을 기본으로 제공해서 인터렉티브한 연출이 가능할 것 같다. 다만 data를 받아 특정 날짜 범위만 활성화하는 기능이 없어 최종적으로 적합하지 않다고 판단했다. 그 기능을 제외하고 선택하면 가장 사용해보고 싶다고 생각했다.

5. Ant Design date-picker

• License: MIT
• 장점
  • 예약 기능을 구현하기 적합한 다양한 props 제공
  • 공식문서가 잘 정리 되어있다.
  • 다양한 props들을 지원
• 단점
  • TimePicker를 따로 추가해야 한다.
  • 비교적 정보량이 적다.
• 개인적인 의견
  • 숙소나 비행기 예약과 같이 시작 날짜와 종료 날짜가 있는 기능을 구현할 때 적합한 props를 다수 지원한다는 장점이 있지만 타임 피커를 별도로 추가해야 한다는 점에서 불편함이 있다. 그리고 input data를 통한 커스텀이 안된다는 점에서 배제했다.