리액트로 기간(날짜) 지정하기 date range ( react-flatpickr )

사실 사람들이 많이 사용하는 것으로는 react-datepicker, react-calendar, react-dates 등이 있다.

하지만 나는 이번 프로젝트에서 템플릿을 기반으로 사용하기 때문에 이미 설치 되어있는 react-flatpickr를 사용해보려고 한다.

어떠한 단점이 있어서 사람들이 많이 사용하지 않는 것 같은데, 결국 어떤 date picker던지 그 코어는 비슷하다고 생각되어 하는 김에 정리를 해놓으면 나중에 다른 것을 사용할 때도 도움이 될 것이라고 생각된다.

 

어디든지 사용 할 수 있는 flatpickr라는 것이 있는데 내가 사용한 것은 react를 위해서 나온 react-flatpickr 이다.

 

1. Installation

설치는 npm, yarn 두 가지 중 아무거나 사용할 수 있다.

나는 주로 yarn을 선호하는 편이므로 yarn을 통해서 설치를 했다.

[ npm ]
$ npm install --save react-flatpickr

[ yarn ]
$ yarn add react-flatpickr

2. Usage

사용 할 때는 아래와 같이 import를 해서 사용한다.

import Flatpickr from "react-flatpickr";

<Flatpickr />

나는 어떤 것을 사용할 때 우선은 그것을 눌러서 한번 살펴보고, 그 다음에 추가적으로 공식문서를 확인하는 편이다.

( 시간이 있다면 공식문서를 봐도 되겠지만, 그러기에는 양이 너무 많은 경우가 있어서 필요한 부분만 보고 싶기 때문이다 )

 

그렇게 열어보면 아래와 같이 나오는데, 이것을 보면 어떤 것들이 들어가야 하는지 우선적으로 확인할 수 있다.

import { Component, ReactElement } from "react";
import flatpickr from "flatpickr";

export type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

export interface DateTimePickerProps extends Omit<Partial<HTMLInputElement>, 'value'> {
    defaultValue?: string;
    options?: flatpickr.Options.Options;
    onChange?: flatpickr.Options.Hook;
    onOpen?: flatpickr.Options.Hook;
    onClose?: flatpickr.Options.Hook;
    onMonthChange?: flatpickr.Options.Hook;
    onYearChange?: flatpickr.Options.Hook;
    onReady?: flatpickr.Options.Hook;
    onValueUpdate?: flatpickr.Options.Hook;
    onDayCreate?: flatpickr.Options.Hook;
    value?: string | Date | number | ReadonlyArray<string | Date | number>;
    className?: string;
    render?: (props: Omit<DateTimePickerProps, 'options' | 'render'>, ref: (node: HTMLInputElement) => void) => ReactElement;
}

export default class DatePicker extends Component<DateTimePickerProps> {
    flatpickr: flatpickr.Instance;
}

 

Basic props로써 기본적으로 들어가야하는 것은 크게 defaultValue / value / options 이 있다.

defaultValue라는 것은 말 그대로 기본값으로써 내부 input에 전달되어지는 값이다.

다시 말해, 초기에 선택되어져 있는 날짜이다.

이는 optional 즉, 넣든 넣지 않든 선택이다.

value는 크게 string || array || object || number 로 구분이 되며, optional하여 넣든 넣지 않든 선택 할 수 있다.

options는 object 객체가 들어가며 여기에서 모든 파라미터를 전달 할 수도 있고, 이 옵션 내에서 flatpickr-hooks를 사용 할수도 있다.

 

그렇다면 이번에는 Event Handler와 Hooks에 대해서 알아보자

위의 설명 코드를 보면 알 수 있다시피 onChange, onOpen, onClose 등 on이 붙은 것을 Event Handler, Hooks라고 할 수 있다.

이를 이용해서 Flatpickr의 기능 동작을 사용자가 지정할 수 있는데, 이는 함수로 지정 할 수 있다.

Hooks로써 추가 된 각 함수들은 3개의 인수를 받게 되는데, 바로 selectedDates / dateStr / instance 이다.

 

selectedDates :  말 그대로 선택 된 날짜로써 사용자가 선택한 날짜 개체의 배열을 말한다.

만약 날짜를 선택하지 않았다면 비어있는 배열이 된다.

dateStr : 가장 마지막에 선택 되어진 날짜의 문자열 표현이다. 날짜 형식 옵션에 따라서 문자열 형식이 지정 된다.

instance : 다양한 메서드와 속성을 포함하고 있는 flatpickr 객체이다.

 

Basic하게는 이런 정도로도 사용해볼 수 있을것이다.

 

그래서 나의 경우 아래와 같이 사용을 했다.

  const [picker, setPicker] = useState(new Date());
  const [date, setDate] = useState("");

<Flatpickr
	style={{
		width: "14rem",
		padding: "0.5rem",
		textAlign: "center",
		borderRadius: "10px",
	}}
	options={{
		mode: "range",
		dateFormat: "Y-m-d",
	}}
	id="range-picker"
	value={picker}
	className="form-conformstrol"
	onChange={(date) => setPicker(date)}
/>

style로 css를 직접 넣은 것 말고는 기본적인것은 비슷하다.

 

options로는 mode, dateFormat을 사용했는데, mode의 종류로는 mode: "single" | "multiple" | "range" | "time"; 이런 것이 존재하고 필요에 따라서 사용해 줄 수 있을 것이다.

나의 경우에는 날짜의 범위가 필요함으로 range를 선택했다.

 

dateForamat의 경우 안을 들여다보면 단순히 dateFormat: string; 이렇게만 나와 있는데 이런 경우 공식문서를 활용하는 편이다.

옆의 설명을 보면 알겠지만, 어떻게 날짜가 input box에 표시될지를 정의해줄 수 있다.

그리고 아래의 the table below에 가면 사용되어지는 각종 포멧 방식에 대해서 볼 수 있다.

 

value 값은 useState로 설정 되어있는 picker로 설정했고, 날짜를 선택하거나 선택한 날짜의 시간을 변경하는 등에 트리거가 되는 onChange의 경우에는 setPicker 안에 내가 선택한 날짜가 담기게 하여 value 값으로 갈 수 있도록 해두었다.

 

---

우선은 이렇게 기본적인 것으로 사용만 해두었다.

이를 useState에 연결해두었으니 연결 된 state 값을 console.log 찍어보면 그 날짜가 찍히는 것을 알 수 있는데, 이제 백엔드 작업이 끝나면 그 날짜에 필요한 것들을 불러올 수 있도록만 만들면 될 것이다.