[React] useForm 사용 - 등록/유효성

0. useForm 사용 - 등록/유효성

:: register(), control에는 유효성 검증을 위한 기준 파라미터가 있음

:: 해당 객체 ref에 태그되는 "name"과 이를 같이 전달하여 등록 및 유효성 검증

0.1 Vaildation 유효성 종류 - 대략

Validation 유효성 종류	내용
- required	필수 입력 여부
- min / max	최소 / 최대 값 설정
- minLength / maxLength	최소 / 최대 문자 길이 설정
- pattern	정규픽 패턴에 맞는지 검사
- validate	사용자 정의 유효성 검사 함수

 

더 많은 vaildation

register

---

1. Validation 유효성 규칙 등록 방법 

• Validation 유효성 규칙을 등록하는 2가지 방법이 존재
  방법 1) Validation 기준만 정의
  방법 2) Validation 기준 + 기준 위배 시 에러 Message 함께 정의

---

1.1 register() 사용 시, 유효성 등록

// 1) Validation 기준만 정의 = 위 예시 코드를 보면 true 통해 특정 유효성에 대해 활성화
<input
  {...register("username", {
    required: true,
  })}
/>

// 2) Validation 기준 + 에러 Message 함께 정의 = 위 예시 코드를 보면 value 와 message 함께 정의
<input
  {...register("username", {
    required: { value: true, message: "이메일을 입력해주세요" },
  })}
/>

---

1.2 Control에서 유효성 등록

1. useController 사용 시,

const name = "username"
const { handleSubmit, control } = useForm()
const { field } = useController({
  name,
  control,
//rules: { required: true }, 방법 1
  rules: { required: { value: true, message: "필수값임" } }, // 방법2
});

return (
	<input
	  id="username"
	  value={field.value}
	  name={field.name}
	  onChange={field.onChange}
	  onBlur={field.onBlur}
	  ref={field.ref}
	/>
)

---

2. <Controller /> 사용 시,

<Controller
  control={control}
  name={name}
//rules={{ required: true }} 방법 1
  rules={{ required: { value: true, message: "필수값임" } }} // 방법 2
  render={({ field: { value, ref, onChange, onBlur, name } }) => (
    <ExternalComponent
      onChange={onChange}
      onBlur={onBlur}
      value={value}
    />
  )}
/>

 

---

참고

ASAC 수업자료