register: (name: string, RegisterOptions?) ⇒ ({ onChange, onBlur, name, ref })

• input, select 등 입력 폼에 제공하는 속성 옵션
• 이 방법을 사용하면 입력을 등록하거나 요소를 선택하고 React Hook Form에 유효성 검사 규칙을 적용할 수 있습니다.
• 유효성 검사 규칙은 모두 HTML 표준을 기반으로 하며 사용자 지정 유효성 검사 방법도 허용합니다.
• 기본적으로 name을 지정하고, RegisterOptions 옵션 기능을 선택적으로 지정할 수 있습니다.

Props

*...register 로 인한 태그에 속성 선언 시 할당되는 기능들은 다음과 같습니다.*

• *onChange : onChange prop은 입력 변경 이벤트를 구독합니다.*
• *onBlur : onBlur prop은 입력폼의 focus를 잃었을 때 발생하는 이벤트를 구독합니다.*
• *ref : 등록할 hook form 에 대한 입력폼의 reference 입니다.*
• *name : 등록 중인 이름을 입력합니다.*

Example

const { register, formState: { errors } } = useForm<{toDo: string}>();
// 여기서 제네릭은 입력폼의 register의 name의 interface를 정의합니다.

render (
	<form onSubmit={handleSubmit(onSubmit)}>
	  <input { ...register('toDo', { required: "Please write text...", maxLength: 2 }) }/>
	  <button>Add</button>
	</form>
)

→ ...register : onChange, onBlur, name, ref 의 property를 해당 태그에 선언한다.

→ toDo : input 태그의 name을 의미한다.

→ { required: true, maxLength: 2 } : RegisterOptions의 속성들을 의미한다.

RegisterOptions

• required

  boolean이 true인 경우 입력에 값이 있어야 양식을 제출할 수 있습니다.

  문자열인 경우 입력에 오류 메시지를 반환하도록 문자열을 할당할 수 있습니다.

  <input {...register("test", { required: true }) } />
  <input {...register("test", { required: '필수 입력값 입니다.' }) } />
  

• maxLength

  이 입력에 대해 허용할 값의 최대 길이입니다.

  <input {...register("test", { maxLength: 2 }) } />
  

• minLength

  이 입력에 대해 허용할 값의 최소 길이입니다.

  <input {...register("test", { minLength: 1 }) } />