useForm 써서 코드 엄청 간결해졌음.. 개이득.. ㅎㅎㅎ

useForm 사용하기

1. useForm 불어오기

//useForm 불어오기
 const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm();

2.유효성 변수 담기

 const regEx = {
    number: /[0-9]/g,
    email: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
    kor: /^[가-힣]+$/,
    eng: /[a-zA-Z]+$/,
  };

3.validator object 변수 담기

  const validator = {
    userId: {
      ...register("userId", {
        required: { value: true, message: "이름은 필수 항목입니다." },
      }),
    },
    age: {
      ...register("age", {
        required: { value: true, message: "나이는 필수 항목입니다." },
        pattern: { value: regEx.number, message: "나이는 숫자로 입력해주세요" },
        maxLength: { value: 2, message: "나이는 두자리입니다." },
      }),
    },
    gender: {
      ...register("gender", {
        required: { value: true, message: "성별은 필수 항목입니다." },
        pattern: { value: regEx.eng, message: "성별은 영어로 입력해주세요." },
      }),
    },
    phone: {
      ...register("phone", {
        required: { value: true, message: "휴대폰번호는 필수 항목입니다." },
        pattern: {
          value: regEx.number,
          message: "휴대폰번호를 숫자로 입력해주세요.",
        },
      }),
    },
    email: {
      ...register("email", {
        required: false,
        pattern: {
          value: regEx.email,
          message: "이메일 형식으로 입력해주세요.",
        },
      }),
    },
    address: {
      ...register("address", {
        pattern: { value: regEx.kor, message: "주소를 한글로 입력해주세요" },
      }),
    },
  };

4.input에 적용

return(<>
<form>
      <div className="inputBox">
          <label htmlFor="userId">Name</label>
          <input type="text" {...validator.userId} />
          {errors.userId && (
            <span className="errorMsg">❌ 	         {errors.userId.message}</span>
          )}
        </div>
           {...생략}
</form>
</>
)

애러가 났을 때 span태그 만들어서 애러 메세지 띄우기

5. reset시키고 data정보 App.js로 전달하기.

  const onSubmit = (data) => {
    onUpdate(data);
    reset({
      userId: "",
      phone: "",
      address: "",
      gender: "",
      age: "",
      email: "",
    });
  };

6.결과

1.아무것도 입력하지 않고 submit을 눌렀을 때

2.pattern에 맞지 않았을 때

3. 형식에 맞게 입력하고 제출을 눌렀을 때

데이터가 App.js로 잘 전달됨!! 성공함!!!