투두리스트를 만들기 전에 먼저, main화면에 만들어질 calender 관련 라이브러리를 찾아보려고 한다.
🗓️ 추가하고 싶은 Calendar 기능
- 할일 개수를 날짜에 표시
- 날짜 클릭시 우측에 투두리스트 화면 표시
- 현재 날짜, 클릭한 날짜 색 표시
📎 리액트에서 사용할 수 있는 다양한 캘린더 관련 라이브러리
React Big Calendar, FullCalendar, DayPicker는 React 기반의 달력 컴포넌트 라이브러리로, 사용자 인터페이스(UI)를 제공하여 사용자가 특정 날짜나 기간을 선택할 수 있게 해준다.
-
React Big Calendar:
이 라이브러리는 일정 표시, 이벤트 관리, 드래그 앤 드롭 등 다양한 기능을 제공한다.
GitHub 링크
공식 문서 -
FullCalendar:
웹 기반의 일정 관리와 캘린더 표시를 위한 유명한 JavaScript 라이브러리이다. 리액트에서 사용하기 위해 @fullcalendar/react 패키지를 활용할 수 있다.
GitHub 링크
@fullcalendar/react 패키지
공식 문서 -
DayPicker:
유연하고 스타일링 가능한 날짜 선택 컴포넌트이다. 단일 날짜나 범위를 선택할 수 있으며, i18n 지원과 함께 다양한 설정 옵션을 제공한다.
GitHub 링크
📎 React Big Calendar 사용 방법
react-big-calendar와 moment를 설치한다.
npm install react-big-calendar moment
import React from 'react';
import { Calendar, momentLocalizer } from 'react-big-calendar';
import moment from 'moment';
import 'react-big-calendar/lib/css/react-big-calendar.css';
const localizer = momentLocalizer(moment);
const MyCalendar = (props) => {
const events = [
{
start: new Date(),
end: new Date(moment().add(1, "days")),
title: "Sample Event",
},
// more events...
];
return (
<div>
<Calendar
localizer={localizer}
defaultDate={new Date()}
defaultView="month"
events={events}
/* events 배열은 달력에 표시될 이벤트 목록이다.
배열의 각 객체는 start, end, 그리고 title 속성을 가져야 한다. */
style={{ height: "100vh" }}
/>
</div>
);
};
export default MyCalendar;
📎 FullCalendar 사용 방법
먼저 필요한 패키지들을 설치한다.
npm install @fullcalendar/react @fullcalendar/daygridimport React from 'react';
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
const MyFullCalendar = () => {
const events = [
{ title: 'Sample Event', date: new Date() },
// more events...
]
return (
<FullCalendar
plugins={[dayGridPlugin]}
initialView="dayGridMonth"
events={events} /*events 배열은 달력에 표시될 이벤트 목록이다.*/
/>
);
}
export default MyFullCalendar;⭐️ 어떤 라이브러리가 더 날까?
구현하고자 하는 기능을 살펴 봤을 때 React Big Calendar 또는 FullCalendar를 사용하는것이 젤 낫다고 생각한다.
-
할 일 개수 표시:
React Big Calendar와 FullCalendar 모두 이벤트를 달력에 표시하는 기능을 제공한다. 따라서 각 날짜에 해당하는 할 일의 개수를 이벤트로 처리하여 달력에 표시할 수 있다. -
날짜 클릭 시 우측에 투두리스트 화면 표시:
두 라이브러리 모두 날짜나 이벤트 클릭 시 콜백 함수를 제공한다. 이 콜백 내에서 우측 영역에 할 일 목록을 보여주는 로직을 구현할 수 있다. -
현재 날짜, 클릭한 날짜 색 표시:
두 라이브러리 모두 현재 날짜와 선택한 날짜를 다르게 스타일링하는 기능을 제공한다.
복잡한 이벤트 관리나 커스텀 스타일링이 필요한 경우 FullCalendar나 React Big Calendar가 좀더 강력하고 융통성 있는 API를 제공한다.
📍 프로젝트가 복잡해진다면 FullCalendar의 API가 좀더 많은 기능과 융통성을 제공하므로 유용할 수 있다.
📍 만약 번들 사이즈가 중요한 요소라면 DayPicker나 React Big Calendar가 상대적으로 가볍다.
📎 캘린더 컴포넌트를 만들때 사용하면 유용한 API
date-fns와 Moment.js는 날짜와 시간을 처리하는 JavaScript 라이브러리이다.
일반적으로 달력 컴포넌트와 함께 사용되어 복잡한 날짜 및 시간 계산을 처리하는데 도움을 준다.
즉, 달력 UI 구성과 상호작용 보다는 복잡한 날짜 및 시간 연산에 주로 쓰인다.
-
Date-fns:
Date-fns는 날짜와 시간을 다루기 위한 유용한 함수들을 제공하는 라이브러리이다.
이를 활용하여 날짜 계산, 형식 변환, 비교 등 다양한 날짜 관련 작업을 수행할 수 있다.
공식 사이트
NPM 패키지 -
Moment.js:
Moment.js는 날짜 및 시간 처리에 특화된 라이브러리로서, 다양한 기능과 포맷팅 옵션을 제공한다. Moment.js는 많은 개발자들에게 인기가 있으며 리액트에서도 사용할 수 있다.
공식 사이트
NPM 패키지
전체적으로 볼 때, date-fns가 현재 웹 개발 트렌드와 잘 맞으며
작은 번들 크기, 간결한 API 등의 이점을 제공하므로 효율적인 선택일 수 있다.
React Big Calendar를 사용할 경우 호환성을 고려하면 Moment.js를 선택하는 것도 괜찮은 것 같다.
Moment.js는 모든 로케일 데이터를 번들에 포함하므로, 그 크기가 상당히 크다.
반면에 date-fns는 트리 쉐이킹을 지원하여 필요한 함수만 가져오고, 로케일 데이터도
별도로 import 할 수 있어서 번들 크기를 줄일 수 있다.
🧐 번들이란?
"번들(bundle)"은 웹 개발에서 특정 목적을 위해 함께 패키지화된 파일 또는 모듈의 집합을 의미한다.
📎 상태관리 라이브러리
-
Redux:
상태를 중앙 집중식으로 관리하고 컴포넌트 간 상태 전달을 편리하게 해주는 도구이다. 또한 Redux Toolkit을 사용하면 보다 간결하고 효율적인 코드를 작성할 수 있다. -
MobX나 Zustand:
Redux보다 더 간단한 문법을 가지고 있어 더 쉽게 상태를 관리할 수 있을 수도 있다.
