[React Hook Form] React Hook Form 공부 - 10 (FormValues 항목에서 문자열이 아닌 number 타입이나 date 타입 사용하기) [7/25 study]

React Hook Form 공부 - 10

 

FormValues 항목에서 문자열이 아닌 number 타입이나 date 타입 사용하기

지금까지 FormValues 항목에는 전부 string 즉, 문자열 타입만 작성했는데요. 

이제는 number 타입이나 date 타입도 작성해 보겠습니다. 

코드의 간결함을 위해 불필요한 거는 주석 처리 하겠습니다.

 

import { useForm, useFieldArray } from 'react-hook-form'
import { DevTool } from '@hookform/devtools'

let renderCount = 0

type FormValues = {
  username: string,
  age: number,
  dob: Date,
}

export default function MyForm() {
  const {
    register,
    control,
    handleSubmit,
    formState: { errors },
  } = useForm <
  FormValues >
  {
    defaultValues: {
      username: 'IU',
      age: 0,
      dob: new Date(),
    },
  }

  const onSubmit = (data: FormValues) => {
    console.log('Form submitted.', data)
  }

  renderCount++
  return (
    <div className='w-full p-4'>
      <h1 className='mb-5 text-2xl'> Render count : {renderCount / 2}</h1>
      <form onSubmit={handleSubmit(onSubmit)} noValidate>
        <div className='w-1/3'>
          <label htmlFor='username'>Username</label>
          <input
            type='text'
            id='username'
            {...register('username', {
              required: 'Username is required.',
            })}
          />
          <p>{errors.username?.message}</p>
          <label htmlFor='age'>Age</label>
          <input
            type='number'
            id='age'
            {...register('age', {
              required: 'Age is required.',
            })}
          />

          <label htmlFor='dob'>Date of birth</label>
          <input
            type='date'
            id='dob'
            {...register('dob', {
              required: 'Date of birth is required.',
            })}
          />
          <button>Submit</button>
        </div>
      </form>
      <DevTool control={control} />
    </div>
  )
}

 

age 항목에는 input type을 number라고 지정했고, dob 항목에는 date라고 지정했습니다. 결과를 볼까요?

 

 

위와 같이 콘솔창에는 age, dob가 모두 문자열로 나옵니다. 

input type 항목만으로는 number, date 타입이 작동하지 않습니다. 

register 함수의 두 번째 인자에 주어지는 객체에 valueAsNumber 항목과 valueAsDate 항목을 추가하고 true라고 명시해야 합니다.

 

<label htmlFor="age">Age</label>
<input
  type="number"
  id="age"
  {...register("age", {
    valueAsNumber: true,
    required: "Age is required.",
  })}
/>

<label htmlFor="dob">Date of birth</label>
<input
  type="date"
  id="dob"
  {...register("dob", {
    valueAsDate: true,
    required: "Date of birth is required.",
  })}
/>

 

이제 실행 결과는 아래와 같이 age는 숫자 타입, dob는 Date 타입으로 입력받게 됩니다.