[React] react-datepicker 라이브러리 사용 하기(캘린더, 달력 라이브러리)

• React-datepicker는 리액트에서 달력을 간단하게 구현할 수 있게 도와주는 라이브러리로, npm 사이트에서 주간 다운로드 횟수를 보면 많이 사용되고 있다. 이 라이브러리를 사용하면 캘린더에서 날짜를 선택하면 Input에 해당 날짜가 입력될 수 있게 구현할 수 있다.

• React-datepicker를 사용하기 위해서는 먼저 npm install react-datepicker --save 또는 yarn add react-datepicker를 통해 설치해야 한다. 설치가 정상적으로 이루어졌는지 확인하려면 프로젝트의 root 폴더 내의 package.json을 열어 "react-datepicker": "^3.8.0" 내용이 있는지 확인하면 된다.

• React에서 날짜 선택을 위해 react-datepicker를 사용하며, 초기 날짜 값을 현재 날짜로 설정하기 위해 useState의 초기 값을 new Date()로 설정한다.

• react-datepicker를 커스텀하는 방법으로 달력을 한글로 표시, Input에 '년 월 일' 형식으로 표시, 시작 날짜를 현재 날짜 이후로만 선택 가능하게 설정, Input 스타일 변경 등을 진행한다.