React 17.0.2, TypeScript 4.3.5, 클래스 컴포넌트 기반으로 작성된 예제입니다.모니터링 주기(DAILY, WEEKLY, MONTHLY)에 따라 UI가 조건부 렌더링 예제

 

// MonitoringScheduler.tsx
import React, { Component, ChangeEvent } from 'react';

type MonitoringCycle = 'DAILY' | 'WEEKLY' | 'MONTHLY';

interface State {
  cycle: MonitoringCycle;
  startTime: string;
  selectedDay?: string;
  selectedDate?: string;
}

export class MonitoringScheduler extends Component<{}, State> {
  state: State = {
    cycle: 'DAILY',
    startTime: '',
  };

  handleCycleChange = (event: ChangeEvent<HTMLInputElement>) => {
    const cycle = event.target.value as MonitoringCycle;
    this.setState({ cycle });
  };

  handleStartTimeChange = (event: ChangeEvent<HTMLInputElement>) => {
    this.setState({ startTime: event.target.value });
  };

  handleDayChange = (event: ChangeEvent<HTMLInputElement>) => {
    this.setState({ selectedDay: event.target.value });
  };

  handleDateChange = (event: ChangeEvent<HTMLSelectElement>) => {
    this.setState({ selectedDate: event.target.value });
  };

  render() {
    const { cycle, startTime, selectedDay, selectedDate } = this.state;

    return (
      <div style={{ padding: '20px', fontFamily: 'Arial' }}>
        <h2>모니터링 스케줄 설정</h2>

        {/* 모니터링 주기 선택 */}
        <div>
          <label>
            <input
              type="radio"
              name="cycle"
              value="DAILY"
              checked={cycle === 'DAILY'}
              onChange={this.handleCycleChange}
            />
            DAILY
          </label>
          <label>
            <input
              type="radio"
              name="cycle"
              value="WEEKLY"
              checked={cycle === 'WEEKLY'}
              onChange={this.handleCycleChange}
            />
            WEEKLY
          </label>
          <label>
            <input
              type="radio"
              name="cycle"
              value="MONTHLY"
              checked={cycle === 'MONTHLY'}
              onChange={this.handleCycleChange}
            />
            MONTHLY
          </label>
        </div>

        {/* Start Time */}
        <div style={{ marginTop: '10px' }}>
          <label>Start Time: </label>
          <input
            type="text"
            value={startTime}
            onChange={this.handleStartTimeChange}
            placeholder="HH:mm"
          />
        </div>

        {/* WEEKLY: 요일 선택 */}
        {cycle === 'WEEKLY' && (
          <div style={{ marginTop: '10px' }}>
            <label>요일 선택:</label>
            {['월', '화', '수', '목', '금', '토', '일'].map((day) => (
              <label key={day} style={{ marginLeft: '10px' }}>
                <input
                  type="radio"
                  name="day"
                  value={day}
                  checked={selectedDay === day}
                  onChange={this.handleDayChange}
                />
                {day}
              </label>
            ))}
          </div>
        )}

        {/* MONTHLY: 날짜 선택 */}
        {cycle === 'MONTHLY' && (
          <div style={{ marginTop: '10px' }}>
            <label>날짜 선택:</label>
            <select value={selectedDate} onChange={this.handleDateChange}>
              <option value="">-- 날짜 선택 --</option>
              {Array.from({ length: 31 }, (_, i) => i + 1).map((date) => (
                <option key={date} value={date}>
                  {date}일
                </option>
              ))}
            </select>
          </div>
        )}
      </div>
    );
  }
}

 

App.tsx에서 컴포넌트를 임포트하고 렌더링하세요.

import React from 'react';
import { MonitoringScheduler } from './MonitoringScheduler';

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

export default App;