React.js를 이용한 온라인 예약 시스템 개발하기

09 Nov 2023

reactjs

온라인 예약 시스템은 많은 사업 분야에서 필수적인 요소로 자리잡고 있습니다. 이번 기사에서는 React.js를 사용하여 간단한 온라인 예약 시스템을 개발하는 방법을 알아보겠습니다.

1. 개발 환경 설정

먼저 React.js를 사용하기 위해 개발 환경을 설정해야 합니다. Node.js를 설치한 후, 다음 명령어를 실행하여 React.js 애플리케이션을 생성합니다.

npx create-react-app reservation-system

위 명령어를 실행하면 reservation-system이라는 디렉토리에 필요한 파일과 폴더가 생성됩니다.

2. 컴포넌트 설계

예약 시스템은 여러 개의 컴포넌트로 구성됩니다. 예약 폼, 예약 목록, 예약 상세 정보 등의 컴포넌트를 설계하고 구현해야 합니다. 각 컴포넌트의 역할과 상태 관리 방법 등을 고려하여 설계합니다.

import React, { useState } from 'react';

function ReservationForm() {
  const [name, setName] = useState('');
  const [date, setDate] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    // 예약 정보를 서버로 전송하는 코드
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="이름" />
      <input type="date" value={date} onChange={(e) => setDate(e.target.value)} />
      <button type="submit">예약하기</button>
    </form>
  );
}

export default ReservationForm;

위 코드는 예약 폼을 구현한 예시입니다. useState 훅을 사용하여 이름과 날짜 입력값을 관리하고, 폼이 제출되었을 때 서버로 예약 정보를 전송하는 코드가 포함되어 있습니다.

3. 라우팅 설정

예약 시스템은 여러 페이지로 구성되어야 합니다. 예약 폼 페이지와 예약 목록 페이지를 구분하기 위해 React Router를 사용하여 라우팅을 설정합니다.

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import ReservationForm from './ReservationForm';
import ReservationList from './ReservationList';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={ReservationForm} />
        <Route path="/reservations" component={ReservationList} />
      </Switch>
    </Router>
  );
}

export default App;

위 코드는 App 컴포넌트에서 React Router를 사용하여 / 경로에는 예약 폼을, /reservations 경로에는 예약 목록을 보여주도록 설정한 예시입니다.

4. 서버와의 통신

예약 정보를 서버로 전송하고, 예약 목록을 서버에서 받아와야 합니다. 이를 위해 AJAX 라이브러리나 fetch API를 사용하여 서버와 통신하는 코드를 구현해야 합니다.

import React, { useState, useEffect } from 'react';

function ReservationList() {
  const [reservations, setReservations] = useState([]);

  useEffect(() => {
    // 서버에서 예약 목록을 가져오는 코드
    fetch('/api/reservations') 
      .then(response => response.json())
      .then(data => setReservations(data));
  }, []);

  return (
    <ul>
      {reservations.map(reservation => (
        <li key={reservation.id}>{reservation.name} - {reservation.date}</li>
      ))}
    </ul>
  );
}

export default ReservationList;

위 코드는 예약 목록을 보여주는 예시입니다. useEffect 훅을 사용하여 컴포넌트가 마운트되었을 때 한 번만 서버에서 예약 데이터를 가져오도록 설정하고, 받아온 데이터를 상태로 관리하여 목록을 렌더링합니다.

5. 마무리

React.js를 이용한 간단한 온라인 예약 시스템을 개발하는 방법을 알아보았습니다. React.js의 장점인 가상 DOM과 컴포넌트 기반 아키텍처를 활용하여 유지 보수 가능하고 확장성 있는 시스템을 만들 수 있습니다. 이를 기반으로 더 복잡한 기능을 추가하고 UI 디자인을 개선하여 실제 운영 환경에서 사용할 수 있는 완성도 높은 예약 시스템을 개발할 수 있습니다.

참고 문서

#ReactJS #예약시스템