date-fns를 사용해보자!

Moment.js 가 개발 중단을 선언했다.
Moment.js 라이브러리 사이트에 들어가보면 아래와 같은 이유로 다른 라이브러리 사용을 권장하고 있다.

1. 새로운 기능을 추가하지 않을 것입니다.
2. Moment API를 immutable로 변경하지 않을 것입니다.
3. Tree shaking 또는 번들 사이즈 이슈를 해결하지 않을 것입니다.
4. 어떤 major 변경도 없을 것입니다 (버전 3는 없습니다).
5. 특히 오랫동안 알려진 문재인 경우 버그나 동작상의 문제를 수정하지 않을 수 있습니다.

대안으로 제안해준 라이브러리들은 다음과 같다.

• Luxon
• Day.js
• Date-fns
• js-Joda

오늘은 이 중에서 date-fns를 사용해보려고 한다!🤗

date-fns을 사용하여 캘린더 만들기 📅

2021년 7월 캘린더를 만들어보자!

startOfMonth, startOfWeek ,endOfMonth, endOfWeek를 사용해서 이번 달의 시작날짜와 끝 날짜를 알수 있다.

 const selectedDate = new Date();

    const startDate = startOfWeek(startOfMonth(selectedDate))
    console.log(startDate)
    const endDate = endOfWeek(endOfMonth(selectedDate))
    console.log(endDate)

해당하는 달의 주별 날짜를 가져오는 함수

date를 주의 마지막 날 + 1일을 해주어 다음 주로 넘어갈 수 있다.

function takeWeek(start = new Date()) {
    let date = startOfWeek(startOfDay(start))

    return function () {
        const week = [...Array(7)].map((_, index) => addDays(date, index))
        date = addDays(week[6], 1)
        return week
    }
}

해당하는 달의 week 배열을 모두 저장

지금까지 저장한 month 배열의 마지막 날짜가 해당 달의 endDate보다 작다면 week 배열 가져와서 저장시킨다.

export function takeMonth(start = new Date()) {
    let month = []
    let date = start

    return function () {
        const weekGen = takeWeek(startOfMonth(date))
        const endDate = startOfDay(endOfMonth(date))
        month.push(weekGen())

        while (lastDayOfRange(month) < endDate) {
            month.push(weekGen())
        }

        const range = month
        month = [];
        date = addDays(lastDayOfRange(range), 1)

        return range
    }
}

function lastDayOfRange(range) {
    return range[range.length - 1][6]
}

요일 리스트 출력

function WeekNames() {
    const weeks =['일', '월', '화', '수', '목', '금', '토']
    return (
        <div className="grid grid-cols-7 text-xs text-gray-500">
            {weeks.map((dayName)=>(
                <div className="h-8 flex items-center justify-center border-r" key={dayName}>{dayName}</div>
            ))}
        </div>
    );
}

날짜 리스트 출력

import {addMonths, format, subMonths} from 'date-fns'

function Calendar() {
    const [currentDate, setCurrentDate] = useState(new Date());
    const [selectedDate, setSelectedDate] = useState(new Date())
    const data = takeMonth(currentDate)()

  
    const nextMonth = () => {
        setCurrentDate(addMonths(currentDate, 1));
    };
    const prevMonth = () => {
        setCurrentDate(subMonths(currentDate, 1));
    };

    return (
        <div className="box-border m-8 w-2/3">
            <div className="flex items-center">
                <h1 className="text-xl font-bold">{format(currentDate, 'MMMM yyyy')}</h1>
                <MdKeyboardArrowLeft onClick={prevMonth} size={20}/>
                <MdKeyboardArrowRight onClick={nextMonth} size={20}/>
            </div>
                <div className="border">
                    <WeekNames/>
                    {data.map((week, index) => <div className="grid grid-cols-7" key={index}>
                        {week.map((day) =>
                            <div onClick={() => setSelectedDate(day)}
                                 className={`h-28 flex flex-col items-center border-b border-r`}
                                 key={day}>
                                <div className={`flex text-xs font-bold ${dayColor(day, currentDate)} h-6 w-6 justify-center items-center cursor-pointer`}> {format(day, 'dd')}</div>
                            </div>)}
                    </div>)}
                </div>
        </div>
    );
}

format을 사용해서 원하는 포맷으로 날짜를 설정할 수 있다!

참고영상