React 17 + TypeScript 환경의 클래스 컴포넌트에서 hh24:mi 형식(예: 13:32)의 값을 입력받아 유효성 검증하는

React 17 + TypeScript 환경의 클래스 컴포넌트에서 hh24:mi 형식(예: 13:32)의 값을 입력받아 유효성 검증하는 예제를 아래에 작성해드리겠습니다.

검증 조건은 다음과 같습니다:

• 형식은 HH:MI (00:00 ~ 23:59)
• 정규표현식으로 검증
• 잘못된 경우 에러 메시지를 출력

import React, { Component, ChangeEvent } from 'react';

interface State {
  time: string;
  error: string;
}

class TimeInputValidator extends Component<{}, State> {
  state: State = {
    time: '',
    error: '',
  };

  validateTimeFormat = (value: string): boolean => {
    // hh24:mi 형식 (24시간제)
    const regex = /^([01]\d|2[0-3]):([0-5]\d)$/;
    return regex.test(value);
  };

  handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    const newTime = e.target.value;
    const isValid = this.validateTimeFormat(newTime);

    this.setState({
      time: newTime,
      error: isValid ? '' : '시간 형식이 잘못되었습니다. (예: 13:32)',
    });
  };

  render() {
    const { time, error } = this.state;

    return (
      <div style={{ padding: '1rem', fontFamily: 'Arial' }}>
        <label>
          시간 입력 (hh24:mi):
          <input
            type="text"
            value={time}
            onChange={this.handleChange}
            placeholder="예: 13:32"
            style={{ marginLeft: '0.5rem' }}
          />
        </label>
        {error && <p style={{ color: 'red' }}>{error}</p>}
      </div>
    );
  }
}

export default TimeInputValidator;

 

설명

• validateTimeFormat: 정규식 ^([01]\d|2[0-3]):([0-5]\d)$는 00:00 ~ 23:59를 만족하는 시간 형식만 허용합니다.
• 사용자가 입력할 때마다 handleChange가 호출되어 유효성을 검증하고 에러 메시지를 표시합니다.

실행 예

• 입력: 13:32 → ✅ 유효
• 입력: 25:10, 08:70, 8:30 → ❌ "시간 형식이 잘못되었습니다" 출력