React Datepicker 라이브러리 사용하기

 

 

자바스크립트로 DatePicker 만드는 과제를 하면서 혼자 굉장히 어려움을 겪었는데(?),,

리액트에서는 DatePicker 라이브러리를 사용할 수 있다! good 🕊️

 

아래는 공식사이트인데, 조금만 공부해도 손 쉽게 깔끔한 DatePicker를 가져올 수 있음 !

https://reactdatepicker.com/#example-external-form

React Datepicker crafted by HackerOne

 

📝  설치하기

설치는 npm으로 해준다. 설치 후에 package.json 파일을 열어 설치가 잘 되었는지 확인해주기 

npm install react-datepicker --save

 

 

📝 사용하기 

사용법은 정말 간단하다. 공식 사이트를 참고하여 작업하면 되는데, 커스텀이 모두되어 있기 때문에 공식 문서에서 마음에 드는 것으로 가져오면 된다. 

 

우선 원하는 파일에 DatePicker를 import 해주기

import DatePicker from "react-datepicker";

 

 

그리고 CSS 스타일도 import 해주어야 한다. 처음에 이거를 놓쳐서 달력을 클릭했을 때 datepicker가 안 뜨고 숫자만 줄줄이 나열 되었었다 ㅠㅠ 

import "react-datepicker/dist/react-datepicker.css";

 

 

나는 라인만 커스텀 되어 있는게 마음에 들어서 아래 코드를 가져왔다. 블로그를 찾아보니 디자인과 기능 커스텀 구현도 가능하다고 하는데 이부분은 조금 더 공부해 봐야겠다.