[React]ReactHookForm

react-hook-form

사용법

API

• useForm()

  • register

    input 또는 selector 요소에 사용 가능하다. 특징은 아래와 같다.

    • 유일한 "name"을 필요로한다.
    • dotSyntax를 사용한다.
    • 여러 option을 추가할 수 있다.

  • handleSubmit

    form의 data를 받아 편하게 제출 가능하게한다.

    • form의 data들은 각 register option에 맞게 validation해야한다.
      그렇지 않으면 undefined 처리된다.
    • (권장) error controll을 위해 try/catch문을 사용하면 좋다.

  • control
    ???

     //exampleCode
       const { register, handleSubmit } = useForm({
        defaultValues: {
          firstName: '',
          lastName: '',
          category: '',
          checkbox: [],
          radio: ''
        }
        });
  
      return (
        <form onSubmit={handleSubmit(console.log)}>
          <input {...register("firstName", { required: true })} placeholder="First name" />
  
          <input {...register("lastName", { minLength: 2 })} placeholder="Last name" />
  
          <select {...register("category")}>
            <option value="">Select...</option>
            <option value="A">Category A</option>
            <option value="B">Category B</option>
          </select>
  
          <input {...register("checkbox")} type="checkbox" value="A" />
          <input {...register("checkbox")} type="checkbox" value="B" />
          <input {...register("checkbox")} type="checkbox" value="C" />
  
          <input {...register("radio")} type="radio" value="A" />
          <input {...register("radio")} type="radio" value="B" />
          <input {...register("radio")} type="radio" value="C" />
  
          <input type="submit" />
        </form>

• useController()