[React] react-date-range 라이브러리로 캘린더 만들기 (feat.date-fns)

숙박예약 사이트를 진행하는 프로젝트에서 필수적으로 필요했던 체크인 - 체크아웃 달력! 

 

달력을 직접 만들어서 구현해보는게 좋을 지 라이브러리를 사용할 지 고민 많이 했는데 직접 구현하는 건 사실 상 조금 비효율적인거 같아서 라이브러리를 활용하기로 했다!

 

내가 필요한 기능은 

• 체크인 - 체크아웃 기간을 선택할 수 있을 것 
• 날짜를 상태값으로 받을 수 있을 것 
• 달력을 커스텀 할 수 있을 것
• 달력에 년도와 월을 표시할 수 있을 것 
• 지난 날짜는 선택할 수 없게 막을 수 있을 것

 

달력 라이브러리는 생각 보다 많았는데 그 중 내가 구현하고 싶은 기능에 맞는 라이브러리 인 react-date-range 를 선택했다! 

react-date-range

 

그리고 날짜를 받으면서 원하는 형식으로 포맷팅하기 위해 date-fns 라이브러리도 같이 사용해줬다. 

Modern JavaScript Date Utility Library

 

일단 라이브러리들을 설치해주고!

npm install react-date-range
npm install date-fns

 

공식문서를 참고해서 내가 원하는 형식의 컴포넌트를 사용해주면 끝! 

 

나는 DateRange 를 선택해서 사용해줬다. 

관련 코드는 밑에 보이는 것처럼 VIEW CODE를 참고해서 사용해주면된다. 

 

달력은 프로젝트내에서 여러곳에서 사용되서 따로 DatePicker라는 컴포넌트로 만들어서 사용했다. 

import { DateRange } from "react-date-range";
import ko from "date-fns/locale/ko";
import { OptionContext } from "../context/OptionProvider";
import { useContext } from "react";
import { formatDate } from "../util/date";

type DateProps = {
  months : number;
}

export default function DatePicker({months} : DateProps) {
  const { date, reservedDates, changeDate } = useContext(OptionContext);

  return (
    <DateRange
      locale={ko} // 달력 언어선택 
      ranges={[date]} // 선택된 날짜 값
      onChange={changeDate} // 실행 함수
      minDate={new Date()} // 최소 날짜, 현재 날짜로 하면 이전 날짜는 선택불가능 
      months={months} // 한번에 보여지는 달력개수
      direction="horizontal" // 달력 방향
      disabledDay={(date) =>
        reservedDates ? reservedDates.includes(formatDate(date)) : false
      }
    />
  );
}

필요한 옵션들 추가해서 사용해주면 끝! 

 

더 이쁘게 커스텀하고 싶었는데 일단 구현하는게 급해서 커스텀은 거의 못했다. 다음에는 더 커스텀에서 활용해 보고 싶다!