날짜계산할 때 유용한 라이브러리: date-fns

프로젝트를 진행하면서 API 응답받은 날짜값을 이용하여 로직을 구현해야하는 일이 생겼는데요
그때 도움을 많이 받은 라이브러리가 date-fns 입니다.

date-fns

[공식 홈페이지] date-fns.org

모듈설치

npm install date-fns

사용법

리액트에서의 활용방법을 알려드리겠습니다! 공식 홈페이지에 들어가시면 사용할 수 있는 함수 종류가 있지만, 제가 주로 활용한 함수 몇가지를 소개하겠습니다.

import { addDays, subDays, isWeekend, isSameDay, isWithinInterval } from "date-fns";

addDays, subDays

const today = new Date()
const threeDaysAgo = subDays(today, 3)
const threeDayLater = addDays(today, 3)
console.log(threeDaysAgo)
console.log(threeDayLater)
console.log(nextDay)
/*
Wed Nov 29 2023 23:48:38 GMT+0900 (한국 표준시)
Sun Nov 26 2023 23:48:38 GMT+0900 (한국 표준시)
Sat Dec 02 2023 23:48:38 GMT+0900 (한국 표준시)
*/

날짜에서 원하는 날만큼을 더하고 뺀 날을 쉽게 구하실 수 있습니다.

isWithinInterval

if(isWithinInterval(today, {start: threeDaysAgo, end: threeDayLater})) {
    console.log("Yes!")
} else {
    console.log("Nope!")
}
//=> Yes!

특정 기간 내에 날짜가 포함되는지 확인할 수 있습니다.

isSameDay

const today = new Date();
const tomorrow = addDays(today, 1);
const result = isSameDay(tomorrow, today);
console.log(result)
//=> false

날짜가 같은지 여부를 판단할 수 있습니다

isWeekend

const christmas = new Date('2023-12-02')
console.log(isWeekend(christmas))

주말인지 여부를 확인할 수 있습니다

예제) 돌아오는 날이 평일인 날짜 구하기

주어진 날짜의 돌아오는 날이 평일인지 확인하기 위해서는 생각해야할 게 있습니다.

돌아오는 날짜가 휴일인 경우는 공휴일 및 주말이 있는데요. 이에 따라서 다음 날이 평일인 날짜를 먼저 입력받은 날짜가 공휴일인지 계산하는 함수를 생성해보겠습니다.

delInfoArr 에는 공휴일이 들어있는 배열입니다.

const delInfoArr = [
    "2023-09-27T15:00:00.000Z",
    "2023-09-28T15:00:00.000Z",
    "2023-09-29T15:00:00.000Z",
    "2023-10-01T15:00:00.000Z",
    "2023-10-02T15:00:00.000Z",
];
  
const isHoliday = (date) => delInfoArr.some((holiday) => isSameDay(new Date(holiday), date));
console.log(isHoliday(new Date('2023-09-27')));
console.log(isHoliday(new Date('2023-09-28')));
/*
false
true
*/

입력받은 값이 dellInfoArr의 배열에 포함이 되어있다면 true, 아니라면 false를 리턴하는 함수를 만듭니다. 이제 isWeekend 함수와 위에서 만든 isHoliday 함수로 결과를 받을 수 있습니다.

const delInfoArr = [
    "2023-09-27T15:00:00.000Z",
    "2023-09-28T15:00:00.000Z",
    "2023-09-29T15:00:00.000Z",
    "2023-10-01T15:00:00.000Z",
    "2023-10-02T15:00:00.000Z",
];
  
const isHoliday = (date) => delInfoArr.some((holiday) => isSameDay(new Date(holiday), date));

const getNextValidDate = (date) => {
    let nextDate = addDays(date, 1);

    while (isWeekend(nextDate) || isHoliday(nextDate)) {
        nextDate = addDays(nextDate, 1)
    }

    return nextDate
}
  
console.log(getNextValidDate(new Date('2023-09-27')));
//=> Wed Oct 04 2023 09:00:00 GMT+0900

위처럼 다음날이 휴일인 경우에는 하루씩 더하여 평일인 날짜를 구할 수 있습니다.