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

 

🎰 들어가며

자바스크립트 ES5 문법을 사용은 많이 해보았다.

이번에 프론트 개발을 React로 진행하면서 아직 ES6문법에 익숙하지 않아 힘들다.

날짜 선택이 필요한 경우, 캘린더 라이브러리로 datepicker를 참 편하게 섰는데, React에서는 어떻게 사용하는지 찾아보며 사용하다가 정리해 두려고 한다.

 

※ 참고 - jquery에서 Datepicker를 사용하는 방법

2022.06.03 - [Java Script/JS] - [라이브러리] Datepicker

[라이브러리] Datepicker

 

---

 

1️⃣ react-datepicker

• 리액트에서 달력을 매우 간단하고 재사용이 쉽게 가능하도록 만들 수 있게 한 라이브러리이다.
• 아래는 npm과 공식 문서이다. 참고가 필요하면 들어가보는 것도 좋다.
• https://www.npmjs.com/package/react-datepicker

react-datepicker

• https://reactdatepicker.com/

React Datepicker crafted by HackerOne

 

 

---

 

 

2️⃣ 설치

• 필자는 npm으로 설치를 진행했다.

npm install react-datepicker --save

• yarn으로 설치하는 방법이다.

yarn add react-datepicker

 

3️⃣ 사용 방법 및 커스터 마이징

• dateFormat(default : yyyy/MM/dd) → "yyyy-MM-dd" 변경해 준다.
• minDate : 오늘 날짜로 설정하여 이전 날짜는 막아준다.
• selectedDate : 날짜 초기값을 설정해 준다.
• locale : ko를 먼저 import 해주고 한글로 설정해 준다.

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { ko } from 'date-fns/esm/locale';

const [startDate, setStartDate] = useState(new Date());

<DatePicker
    dateFormat={"yyyy-MM-dd"}
    minDate={new Date()}
    selected={startDate}
    onChange={date => setStartDate(date)}
    locale={ko}
    placeholderText={"날짜를 입력해 주세요"}
/>

 

🙌 마무리

위에서 커스터 마이징 외에도 추가로 더 필요한 설정이 있으면 공식문서에 잘 정리 되어 있으므로 참고하면 될 것 같다.

리액트에서는 캘린더를 구현하기 위해서 react-datepicker 라이브러리를 처음 사용해봤습니다.

react-datepicker 좋습니다!