React.js는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리로, 가독성, 성능, 재사용성 등의 장점을 가지고 있습니다. 이번 블로그 포스트에서는 React.js를 활용하여 간단한 캘린더 애플리케이션을 만드는 방법에 대해 소개하겠습니다.

1. React.js 프로젝트 설정하기

먼저 React.js 프로젝트를 설정해야 합니다. create-react-app 명령어를 통해 React.js 프로젝트를 생성하고, 필요한 의존성을 설치합니다.

npx create-react-app calendar-app
cd calendar-app
npm install moment
npm install react-big-calendar

위의 명령어를 실행하면 calendar-app이라는 디렉토리가 생성되고, 필요한 패키지들이 설치됩니다.

2. 캘린더 컴포넌트 만들기

이제 캘린더 컴포넌트를 만들어보겠습니다. src 디렉토리에 Calendar.js 파일을 생성하고, 다음과 같이 작성합니다.

import React from 'react';
import { Calendar } from 'react-big-calendar';
import moment from 'moment';

import 'react-big-calendar/lib/css/react-big-calendar.css';

const events = [
  {
    start: moment().toDate(),
    end: moment().add(1, 'days').toDate(),
    title: 'Sample Event',
  },
];

const MyCalendar = () => {
  return <Calendar events={events} defaultView="month" />;
};

export default MyCalendar;

위 코드에서는 react-big-calendar 패키지를 사용하여 캘린더 컴포넌트를 만들었습니다. events 배열에는 캘린더에 표시할 이벤트들을 정의하고, MyCalendar 컴포넌트에서 이벤트들을 전달하여 캘린더를 렌더링합니다.

3. 애플리케이션에 캘린더 컴포넌트 추가하기

이제 캘린더 컴포넌트를 애플리케이션에 추가하는 작업을 진행해보겠습니다. src 디렉토리에 있는 App.js 파일을 열고, 다음과 같이 수정합니다.

import React from 'react';
import MyCalendar from './Calendar';

const App = () => {
  return (
    <div>
      <h1>캘린더 애플리케이션</h1>
      <MyCalendar />
    </div>
  );
};

export default App;

위 코드에서는 MyCalendar 컴포넌트를 App 컴포넌트에 추가하고, 화면에 캘린더를 표시합니다.

4. 애플리케이션 실행 및 확인하기

마지막으로, 작성한 애플리케이션을 실행하여 캘린더가 올바르게 표시되는지 확인해보겠습니다. 터미널에서 다음 명령어를 실행합니다.

npm start

실행이 완료되면 브라우저에서 http://localhost:3000으로 접속하여 캘린더 애플리케이션을 확인할 수 있습니다.

마무리

본 포스트에서는 React.js를 활용하여 간단한 캘린더 애플리케이션을 만드는 방법에 대해 소개했습니다. React.js를 사용하면 쉽게 사용자 인터페이스를 구축할 수 있으며, 다양한 라이브러리와 컴포넌트들을 활용하여 더욱 풍부한 애플리케이션을 개발할 수 있습니다.

#React #React.js