[React] 날짜 선택 input&calendar 컴포넌트 만들기(1) 에서 이어지는 글 입니다.

3. 유효성 검사

사용자가 입력한 날짜가 올바른 날짜인지 확인한다.
? 올바른 날짜의 조건?
1. 인풋값에 들어올 날짜는 이미 목격한 신고에 대해 접수하기 때문에 오늘 날짜보다 이후의 날짜는 들어오면 안된다. 즉 들어올 수 있는 최신날짜는 오늘이다.

2. 56월, 42일 처럼 존재하지 않는 날짜는 들어와서는 안된다.

3-1 유효성검사 방법 1 : RegExp.test()사용 --> 실패

test() 메서드는 주어진 문자열이 정규표현식을 만족하는지 판별해주고 그 여부를 true, false로 리턴한다.

yyyy-mm-dd형식의 정규식은 아래와 같다.
/^(19[7-9][0-9]|20\d{2})-(0[0-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/

export default function DateSelector({ date, setDate }: IDateProps){
	
    ...
  const formatCheck =
    /^(19[7-9][0-9]|20\d{2})-(0[0-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;

  const checkValidDate = (e:any) => {
    return formatCheck.test(date);
  }
  
  	...


return (
    <div className="border-2 flex align-center">
      <input
        ...
        onBlur={checkValidDate}
      />
		...
  )

input창의 focus가 해제되었을 때(onBlur) checkValidDate를 실행시켜서 유효성날짜에 대한 유효성을 검증한다.

그러나 위의 방식 같은 경우는 조건1을 만족하지 못해서 사용할 수 없었다.

1번 조건이 없는 일반적인 상황에서는 사용할 수 있을 것 같다.

3-2 유효성검사 방법 2 : moment 사용 ---> 성공

npm install moment --save
공식문서에서 다양한 활용법을 찾아볼 수 있다.

Moment.js 라이브러리를 통해 날짜포맷과 과거날짜입력 조건을 모두 검증해 볼 수 있다.

const checkValidDate = (e: any) => {
    const value = e.target?.value
    const selectedDate = moment(value, format, true)
    const isValid = selectedDate.isValid()
    if (isValid) {
      //포맷 통과
      let dateGap = moment([
        value.slice(0, 4),
        value.slice(5, 7),
        value.slice(8, 10),
      ]).fromNow()

      if (dateGap.slice(-3) === 'ago') {
        console.log('올바른 날짜 입니다.')
      } else {
        console.log('현재 시점보다 미래의 날짜는 입력할 수 없습니다.')
      }
    }
  }

moment() 함수
날짜와 시간을 포맷팅 할 수 있다.
매개변수는 (값, 형식, 값이 형식에 맞는가(optional))로 이우러져 있다.
selectedDate객체의 isValid 함수를 통해 주어진 값이 포맷과 일치하는지를 리턴받는다.

moment().fromNow()
timeFromNow는 입력한 시간과 현재 시점 사이의 시간차를 string으로 리턴해준다.
입력시점이 현재보다 과거일 경우 -> ~~years ago
입력시접이 현재보다 미래 일 경우 -> in a year
를 각각 반환한다.