MobX 조합으로 작성된 예제이며, observer를 사용한 함수형 컴포넌트모니터링 주기에 따라 라디오Start Time 입력은 항상 표시WEEKLY 선택 시 요일 라디오MONTHLY 선택 시 1~31일 콤보박스

monitorStore.ts

import { makeAutoObservable } from "mobx";

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

export class MonitorStore {
cycle: MonitoringCycle = 'DAILY';
startTime: string = '';
dayOfWeek: string = 'MON';
dayOfMonth: number = 1;

constructor() {

makeAutoObservable(this);

}

setCycle = (cycle: MonitoringCycle) => {

this.cycle = cycle;

};

setStartTime = (time: string) => {

this.startTime = time;

};

setDayOfWeek = (day: string) => {

this.dayOfWeek = day;

};

setDayOfMonth = (day: number) => {

this.dayOfMonth = day;

};
}

export const monitorStore = new MonitorStore();
Monitor.tsx
tsx
복사
편집
import React from 'react';
import { observer } from 'mobx-react-lite';
import { monitorStore } from './monitorStore';

export const Monitor = observer(() => {
const store = monitorStore;

const handleCycleChange = (e: React.ChangeEvent) => {

store.setCycle(e.target.value as any);

};

const handleStartTimeChange = (e: React.ChangeEvent) => {

store.setStartTime(e.target.value);

};

const handleDayOfWeekChange = (e: React.ChangeEvent) => {

store.setDayOfWeek(e.target.value);

};

const handleDayOfMonthChange = (e: React.ChangeEvent) => {

store.setDayOfMonth(Number(e.target.value));

};

const renderDayOfWeekOptions = () => {

const days = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'];
return (
  <div>
    <label>요일 선택: </label>
    {days.map(day => (
      <label key={day} style={{ marginRight: 10 }}>
        <input
          type="radio"
          name="dayOfWeek"
          value={day}
          checked={store.dayOfWeek === day}
          onChange={handleDayOfWeekChange}
        />
        {day}
      </label>
    ))}
  </div>
);

};

const renderDayOfMonthOptions = () => {

return (
  <div>
    <label>날짜 선택: </label>
    <select value={store.dayOfMonth} onChange={handleDayOfMonthChange}>
      {Array.from({ length: 31 }, (_, i) => i + 1).map(day => (
        <option key={day} value={day}>
          {day}일
        </option>
      ))}
    </select>
  </div>
);

};

return (

<div style={{ padding: 20, fontFamily: 'Arial' }}>
  <h3>모니터링 주기 설정</h3>

  <div style={{ marginBottom: 10 }}>
    <label>주기 선택: </label>
    {(['DAILY', 'WEEKLY', 'MONTHLY'] as const).map((type) => (
      <label key={type} style={{ marginRight: 10 }}>
        <input
          type="radio"
          name="cycle"
          value={type}
          checked={store.cycle === type}
          onChange={handleCycleChange}
        />
        {type}
      </label>
    ))}
  </div>

  <div style={{ marginBottom: 10 }}>
    <label>Start Time: </label>
    <input
      type="text"
      value={store.startTime}
      onChange={handleStartTimeChange}
      placeholder="HH:mm"
    />
  </div>

  {store.cycle === 'WEEKLY' && renderDayOfWeekOptions()}
  {store.cycle === 'MONTHLY' && renderDayOfMonthOptions()}
</div>

);
});
index.tsx
tsx
복사
편집
import React from 'react';
import ReactDOM from 'react-dom';
import { Monitor } from './Monitor';

ReactDOM.render(
<React.StrictMode>

<Monitor />

</React.StrictMode>,
document.getElementById('root')
);