리액트 react-date-range 라이브러리

1. react-date-range 및 필요한 스타일 시트 설치

첫 번째 단계로, react-date-range 라이브러리와 함께 필요한 CSS 파일을 설치해야 합니다. 이 라이브러리는 리액트 프로젝트에 간편하게 날짜 범위 선택기를 추가할 수 있게 해줍니다. 설치는 npm이나 yarn을 사용하여 수행할 수 있습니다.

npm install react-date-range date-fns

또한, react-date-range의 기본 스타일과 테마를 적용하기 위해 아래 CSS 파일을 import합니다.

import 'react-date-range/dist/styles.css'; // 기본 스타일
import 'react-date-range/dist/theme/default.css'; // 기본 테마

2. 날짜 범위 선택기 구현

다음으로, DateRange 컴포넌트를 사용하여 날짜 범위 선택기를 구현합니다. 이 예제에서는 시작 날짜와 종료 날짜를 상태(state)로 관리하기 위해 React의 useState 훅을 사용합니다.

import React, { useState } from 'react';
import { DateRange } from 'react-date-range';
import { ko } from 'date-fns/locale';

function DateRangePicker() {
    const [state, setState] = useState([
        {
            startDate: new Date(),
            endDate: new Date(),
            key: 'selection',
        },
    ]);

    const handleSelect = (ranges) => {
        setState([ranges.selection]);
    };

    return (
        <DateRange
            onChange={handleSelect}
            moveRangeOnFirstSelection={false}
            ranges={state}
            locale={ko} // 한국어로 변경
        />
    );
}