[React] React Datepicker 이용해서 달력 만들기

들어가며

리액트에서 달력을 구현할 수 있는 여러가지 라이브러리 중 react-datepicker 를 이용해서

시작 날짜와 종료 날짜를 선택할 수 있는 즉, 날짜를 범위로 선택할 수 있는 달력을 구현해보고자 한다.

이것을 이용해서 여행 일정 관리나, 날짜를 선택해야 하는 예약 시스템을 구현할 수 있을거라 생각한다.

 

달력 만들기

 먼저 리액트 프로젝트에서 npm이나 yarn 을 이용해서 date-picker 를 다운로드 한다.

npm install react-datepicker

yarn add react-datepicker

 

만약 날짜를 한국어로 설정하고 싶다면  date-fns 에서 해당 기능을 제공하므로 같이 다운로드 한다.

npm install date-fns

yarn add date-fns

 

기본 달력 표시

DatePicker 라는 컴포넌트를 import 해서 사용할 수 있다.

 

아래는 기본적인 달력의 모습을 보여줄 수 있는 코드 예시다.

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


export default function DateSelector() {
  return (
    <>
      <DatePicker
        inline
        locale={ko}
        dateFormatCalendar="yyyy년 M월"
      />
    </>
  );
}

그러면 위와 같이 기본적인 달력의 UI 를 구성해준다.

inline 속성을 써야 기본 달력이 보이며, 쓰지 않으면 input 창을 보여주고 input 을 눌러야 달력을 보여준다.

locale 설정으로 언어를 설정할 수 있다. 

locale 에 ko 즉, 한국어 설정을 넣어서 한국어로 출력했다.

또한 달력의 날짜 포맷을 지정해줄 수 있다.

dateFormatCalendar 에서 "yyyy년 M월" 로 써서 년도, 월 순으로 출력해줬다.

 

 

이제 여기서 응용해서 시작 일자와 종료 일자를 선택할 수 있는 달력 UI 를 구현해보고자 한다.

 

일정 관리 달력 구현

일정 관리 달력(시작 일자와 종료 일자 선택하는 달력)은 여행 일정 관리 앱이나 호텔 예약 사이트에서 흔히 볼 수 있다.

date-picker 를 사용하면 간단하게 구현할 수 있다.

 

import { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.module.css";
import { ko } from "date-fns/locale";
import "./DateSelector.css";

export default function DateSelector() {
  // 오늘 날짜
  const today = new Date();

  // 시작 일자, 종료 일자 상태 관리
  const [dateRange, setDateRange] = useState<[Date | null, Date | null]>([
    null,
    null,
  ]);
  const [startDate, endDate] = dateRange;

  // 날짜 포맷팅 함수
  const formatDate = (date: Date) => {
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();

    return `${year}년 ${month}월 ${day}일`;
  };

  return (
    <>
      <div>
        {startDate !== null && <span>{`${formatDate(startDate)}`}</span>}
        {startDate !== null && endDate !== null && (
          <span>{` - ${formatDate(endDate)}`}</span>
        )}
      </div>
      <DatePicker
        inline
        monthsShown={2}
        selectsRange={true}
        startDate={startDate ?? undefined}
        endDate={endDate ?? undefined}
        minDate={today}
        maxDate={
          startDate !== null && endDate === null
            ? new Date(
                startDate.getFullYear(),
                startDate.getMonth(),
                startDate.getDate() + 10
              )
            : undefined
        }
        onChange={(date) => setDateRange(date)}
        locale={ko}
        dateFormatCalendar="yyyy년 M월"
      />
    </>
  );
}

 

1. 먼저 시작 일자, 종료 일자를 지정하기 위해 

useState 를 이용해서 상태 관리를 한다.

const [dateRange, setDateRange] = useState<[Date | null, Date | null]>([
  null,
  null,
]);
const [startDate, endDate] = dateRange;

 

그리고 이걸 DatePicker 컴포넌트에서 startDate, endDate 에 각각 값을 할당한다.

단,  저 속성에는 null 값을 지정할 수 없다. 그래서 null 값이면 undefind 를 할당되도록 했다.

 

2. minDate, maxDate 속성 설정으로 날짜 범위를 제한할 수 있다.

minDate={today}
maxDate={
  startDate !== null && endDate === null
    ? new Date(
        startDate.getFullYear(),
        startDate.getMonth(),
        startDate.getDate() + 10
      )
    : undefined
}

 

minDate는 오늘 날짜를 지정해서 오늘 날짜 이전의 날짜를 선택할 수 없도록 설정하고,

maxDate 는 선택된 날짜로부터 10일까지만 선택하도록 제한했다.

 

3. onChange 함수로 날짜를 지정하면 그 값이 startDate, endDate 에 저장이 되도록 설정했다.

selectsRange 를 true 로 설정해야 날짜의 범위를 지정할 수 있다.

 

4. 선택된 날짜를 한 눈에 볼 수 있도록 포맷팅 함수와 그 함수를 이용해서 날짜를 표시하는 것을 해줬다.

  // 날짜 포맷팅 함수
  const formatDate = (date: Date) => {
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();

    return `${year}년 ${month}월 ${day}일`;
  };

 

  return (
      <div>
        {startDate !== null && <span>{`${formatDate(startDate)}`}</span>}
        {startDate !== null && endDate !== null && (
          <span>{` - ${formatDate(endDate)}`}</span>
        )}
      </div>
  )

결과

이 방법을 응용해서 프로젝트를 더 효율적으로 개발할 수 있을거라 생각한다.

 

Reference

https://reactdatepicker.com/

React Datepicker crafted by HackerOne

 

패스트캠퍼스 강의 자료