React : React Datepicker 달력 라이브러리 캘린더 만들기

https://reactdatepicker.com/

https://github.com/Hacker0x01/react-datepicker

 

 

여러 달력을 찾아보고 수소문 했지만 활용에 있어서는 이것 만한게 없었다.

 

라이브러리를 그대로 가져다 쓸 경우에는 느낌있게 생긴 다른 달력 라이브러리들도 좋겠지만,

달력 안의 기능들부터 스타일까지 수정해야 할 것들이 많은 경우에는 datepicker를 추천하고 싶다.

 

대표사이트에 들어가보면 여러 기능들이 친절하게 설명되어 있고, 나름 찾기도 쉽다.

이용하는 사람들도 많았었기 때문에 문제가 생겨서 구글링 했을 때에 정보들도 잘 나오는 편이다.

 

 

 

reactdatepicker 사이트의 왼쪽 리스트를 클릭하면 선택한 기능에 대한 코드를과 예시를 볼 수 있다.

<DatePicker> 자체적으로 많은 속성들을 가지고 있어서 어떤 속성들이 어떤 기능을 하는지 대략적으로 확인할 수 있다.

 

 

내가 커스터마이징한 달력과 코드이다. 코드 맨위의 placeholder부터 객체로 만들어져 있는 속성은 프로젝트 사이트에서 "편도" / "왕복" 의 타입에 따라 달력이 달라져야 하기 때문에 달력이 조건에 따라 다른 값을 가질 수 있게 속성 값을 객체로 분리해서 만든 상황이다. <Datepicker> 안의 {...oneWayOrRound}가 그것을 의미한다. 코드 하단의 renderCustomHeader은 달력의 헤더 부분을 커스터마이징 하기 위해 검색해서 가져온 속성 값이다. 

 

 

처음에는 mui의 달력 라이브러리를 가지고 작업을 했는데 생각보다 활용이 어려웠다. 스타일 변경하는데 워낙 고생을 했고 원하는 기능을 넣고 빼는게 복잡해서 결국 지우고 datepicker로 갈아탔다. 개인적으로는 훨씬 사용이 편했던 것 같다. 

 

처음 라이브러리 활용이라 그런지 시간도 많이 걸리고 스트레스도 받았다. 같은 문제로 고민하던 사람들이 있어서 구글링을 통해서 해결할 수 있었다. 라이브러리 api의 활용이나 css적인 커스터마이징 같은 것들도 익숙해지면 더 잘 활용 할 수 있을 것 같다.