현재 진행 중인 프로젝트에서 달력을 구현해야 할 일이 있어서 react-calendar 라이브러리를 이용해 구현 과정을 포스팅 해 보려고 한다👀
↑ 공식 문서를 많이 참고했다.
🎯 기본 세팅
라이브러리 설치
npm i react-calendar라이브러리를 설치해준다. 우리 프로젝트는 TypeScript 프로젝트인데, react-calendar 라이브러리도 TS를 지원해서 별도의 타입 설치 없이 사용할 수 있었다.
import 해서 사용하기
import Calendar from 'react-calendar';
...
return(
...
<Calendar />
...
)이렇게 import 후 코드를 추가하면,
다음과 같은 달력이 나타난다. 이제 이걸 커스텀 해서 사용하면 된다.
🎯 날짜 선택하기
import { useState } from 'react';
import Calendar from 'react-calendar';
type ValuePiece = Date | null;
type Value = ValuePiece | [ValuePiece, ValuePiece];
function MyApp() {
const [value, onChange] = useState<Value>(new Date());
return (
<div>
<Calendar onChange={onChange} value={value} />
</div>
);
}공식 문서에 나온 기본 사용 코드이다. 나는 우리 프로젝트에 맞는 좀 더 직관적인 이름으로 변경해서 사용해 보려고 한다.
export type DatePiece = Date | null;
export type SelectedDate = DatePiece | [DatePiece, DatePiece];타입은 별도의 파일에 위와 같이 정의해 주었고,
const [selectedDate, setSelectedDate] = useState<SelectedDate>(new Date());
...
<Calendar onChange={setSelectedDate} value={selectedDate} />사용하는 부분에서는 이런 식으로 설정해 주었다. value 값은 기본적으로는 "오늘" 날짜가 설정되고, 날짜를 클릭 시에는 해당 값으로 value 값이 변경된다.
useEffect를 이용해 selectedDate 값이 바뀔 때마다 콘솔에 찍어주는 코드를 실행시키면 결과값이 위와 같이 찍힌다.
🎯 스타일 커스텀 하기
라이브러리에 있는 달력 엘리먼트이다. 스타일을 지정할 수 있게끔 className이 다 지정되어 있다.
import 'react-calendar/dist/Calendar.css';해당 css를 import 하고, className을 이용하여 스타일을 지정해주면 간단하게 커스텀이 가능하다.
.react-calendar__navigation {
width: inherit;
height: 3.5rem;
display: flex;
text-align: center;
align-items: center;
padding: 0 5.5rem;
.react-calendar__navigation__label {
width: 5.5rem;
height: 1.375rem;
font-size: 16px;
border: none;
font-weight: 700;
background-color: #fff;
}
.react-calendar__navigation__prev-button {
border: none;
background-color: #fff;
cursor: pointer;
opacity: 0;
}
}예를 들면 위와 같이 할 수 있다.
🎯 내장 속성 활용하기
react-calendar 공식 레포지토리에 가면, props로 활용할 수 있는 속성들에 대해 정리되어 있다. 시간 관계상 모든 props를 다 분석해가며 개발할 수 있는 상황은 아니었고, 내가 활용한 몇 가지 속성들에 대한 정보만 적어보려고 한다.
<Calendar
onChange={setSelectedDate}
value={selectedDate}
calendarType="gregory"
view="month"
prev2Label={null}
next2Label={null}
showNeighboringMonth={false} />calendarType: 달력 타입을 지정할 수 있다. 기본 타입은 첫 번째 요일이 "월요일"로 되어 있는데, 우리 프로젝트 디자인에서는 "일요일"부터 시작하게 되어 있어서 이calendarType의 값을 "gregory" 또는 "hebrew"로 바꿀 필요가 있었다.view: 달력 보기를 월/연도/10년/세기 단위로 제한할 수 있다. 원래는 연도와 월이 나와 있는, 예를 들어 "2024년 1월" navigation을 클릭하면, 월/연도를 선택할 수 있게끔 나오는데, 이 속성을month로 제한하면 선택할 수 없게끔 제한할 수 있는 것 같다. (다만 이 속성의 경우 내가 제대로 이해한 게 아닐 수도 있다🥹)prev2Label,next2Label:<<,>>이렇게 생긴 버튼인데, 누르면 year 단위로 달력이 이동한다. 우리 프로젝트 디자인에서 이 버튼은 불필요하다. 이 값들을null로 설정하면 버튼을 없앨 수 있다기에 해당 속성을 사용했다.showNeighboringMonth: 이웃한 달의 날짜를 보여줄지 말지 결정하는 속성.- 이렇듯 웬만한 속성값들로 커스텀이 가능하다! 정말 유용한 라이브러리...
🎯 마무리
우리 프로젝트에 맞게 커스텀한 모습은 위와 같다!
다른 훌륭한 개발자들이 만들어놓은 라이브러리를 잘 이해하고 활용하기 위해서는 javascript와 react 라이브러리에 대한 근본적인 이해가 필요하다는 것을 느꼈다. 이제 진짜 책으로 깊게 공부 좀 해야 할 것 같다... 며칠 전에 읽은 칼럼에서 처음에 개발 실력을 늘리기 위해서는 실전이 좋지만, 이후에는 공부를 통한 깊은 이해가 중요하다는 내용이 나왔었는데 전적으로 공감한다. 나는 이제 공부를 통한 깊은 이해가 필요한 단계인 것 같다.
