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')
);