React.js는 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리로, 웹 애플리케이션 개발에 널리 사용됩니다. 이번 블로그 포스트에서는 React.js를 활용하여 캘린더 애플리케이션을 만드는 방법에 대해 알아보겠습니다.

1. 프로젝트 설정

먼저 React.js 프로젝트를 설정해야 합니다. create-react-app을 사용하여 새로운 프로젝트를 생성하고, 필요한 패키지를 설치합니다.

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

moment와 react-datepicker 패키지를 설치하였습니다. moment는 날짜와 시간을 다루는 라이브러리이며, react-datepicker는 날짜 선택 기능을 제공하는 React 컴포넌트입니다.

2. 캘린더 컴포넌트 작성

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

import React from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

class Calendar extends React.Component {
  constructor() {
    super();
    this.state = {
      selectedDate: null
    };
  }

  handleDateChange = (date) => {
    this.setState({ selectedDate: date });
  }

  render() {
    return (
      <div>
        <h1>캘린더 애플리케이션</h1>
        <DatePicker selected={this.state.selectedDate} onChange={this.handleDateChange} />
      </div>
    );
  }
}

export default Calendar;

위 코드에서 Calendar 컴포넌트는 DatePicker 컴포넌트를 렌더링하고, 선택된 날짜를 state에 저장합니다. handleDateChange 메소드는 날짜가 선택될 때마다 호출되며, 선택된 날짜를 state에 업데이트합니다.

3. App 컴포넌트 수정

이제 App.js 파일을 수정하여 Calendar 컴포넌트를 사용하도록 만들어보겠습니다. src 폴더 내부의 App.js 파일을 다음과 같이 수정합니다.

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

function App() {
  return (
    <div className="App">
      <Calendar />
    </div>
  );
}

export default App;

위 코드에서 App 컴포넌트는 Calendar 컴포넌트를 불러와 렌더링합니다.

4. 앱 실행 및 테스트

이제 애플리케이션을 실행하고 테스트해봅시다. 프로젝트 루트 디렉토리에서 다음 명령어를 실행합니다.

npm start

웹 브라우저에서 http://localhost:3000에 접속하면 캘린더 애플리케이션이 실행됩니다. 날짜를 선택해보고 상태가 변하는지 확인해보세요.

마무리

React.js를 활용하여 캘린더 애플리케이션을 만드는 방법을 소개해드렸습니다. React.js의 강력한 컴포넌트 기능을 활용하여 웹 애플리케이션을 개발할 수 있습니다. 더 복잡한 기능을 추가하여 다양한 유용한 앱을 만들어보세요!

예제 프로젝트 전체 코드는 GitHub 저장소에서 확인하실 수 있습니다.

#React #JavaScript