React 앱에 캘린더(react-calendar) 적용하기

현대 웹 애플리케이션에서는 일정 관리와 날짜 선택 기능이 점점 더 중요해지고 있습니다. 사용자 친화적인 캘린더 기능을 구현하면 애플리케이션의 가치를 높일 수 있습니다. 이 글에서는 React 애플리케이션에 손쉽게 캘린더 기능을 추가할 수 있는 react-calendar 라이브러리를 소개하고, 단계별로 적용하는 방법을 설명하겠습니다.

1. react-calendar란?

react-calendar는 React를 위한 오픈 소스 캘린더 컴포넌트로, 간단하고 커스터마이즈가 용이합니다. 날짜 선택, 범위 선택, 로컬라이제이션 등 다양한 기능을 제공하여 다양한 요구사항에 대응할 수 있습니다.

2. React 앱 설정하기

먼저 새로운 React 프로젝트를 생성합니다:

npx create-react-app my-calendar-app
cd my-calendar-app

3. react-calendar 설치하기

프로젝트 디렉토리에서 다음 명령어로 react-calendar를 설치합니다:

npm install react-calendar

또는 yarn을 사용하는 경우:

yarn add react-calendar

4. 기본 사용법

이제 컴포넌트를 앱에 가져와서 사용해 보겠습니다.

import React, { useState } from 'react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';

function App() {
  const [value, onChange] = useState(new Date());

  return (
    <div>
      <h1>React Calendar 예제</h1>
      <Calendar onChange={onChange} value={value} />
    </div>
  );
}

export default App;

위 코드에서 우리는 Calendar 컴포넌트를 가져와 상태와 함께 사용하고 있습니다.

5. 캘린더 커스터마이징

react-calendar는 다양한 props를 통해 커스터마이징이 가능합니다.

날짜 범위 제한하기

<Calendar
  minDate={new Date()}
  maxDate={new Date(2023, 11, 31)}
/>

보기 모드 변경하기

월별, 연도별 보기 등을 설정할 수 있습니다.

<Calendar
  view="year"
  onViewChange={({ activeStartDate, view }) => console.log(view)}
/>

6. 이벤트 핸들링

날짜 선택 시 특정 동작을 수행하려면 onChange 핸들러를 사용합니다.

function App() {
  const [date, setDate] = useState(new Date());

  const handleDateChange = (value) => {
    setDate(value);
    console.log('선택된 날짜:', value);
  };

  return (
    <Calendar onChange={handleDateChange} value={date} />
  );
}

7. 스타일링

기본 CSS를 가져오지 않고 커스텀 스타일을 적용할 수 있습니다.

import './CustomCalendar.css';

그리고 CSS 파일에서 원하는 대로 스타일을 지정합니다.

.react-calendar {
  border: none;
}

.react-calendar__tile {
  background: none;
}

8. 로컬라이제이션

다국어 지원을 위해 로컬라이제이션을 설정할 수 있습니다.

import { Calendar } from 'react-calendar';
import { ko } from 'date-fns/locale';

<Calendar locale="ko-KR" />

9. 고급 기능

날짜 범위 선택

const [dates, setDates] = useState([new Date(), new Date()]);

<Calendar
  selectRange
  onChange={setDates}
  value={dates}
/>

타일 콘텐츠 커스터마이징

특정 날짜에 특별한 마크를 표시할 수 있습니다.

<Calendar
  tileContent={({ date, view }) =>
    view === 'month' && date.getDay() === 0 ? <p>휴일</p> : null
  }
/>

결론

react-calendar를 사용하면 React 애플리케이션에 강력하고 유연한 캘린더 기능을 손쉽게 추가할 수 있습니다. 다양한 커스터마이징 옵션과 간단한 사용법으로 프로젝트의 기능성을 향상시켜 보세요.

참고 링크:

• react-calendar GitHub
• printable calendar```
  코드를 입력하세요