와,. 한줄기 빛같은 존재인 useForm을 알아버렸다.. 노가다 안해도됨..
개좋음.. 써볼꺼임..

한줄기의 빛같은 useForm을 사용해 보겠음 .,,, 둑흔둑흔
이제 노가다의 유효성 검사에서 벗어날 수 있는 것인가... ㅎㅎㅎㅎㅎ

$npm -i react-hook-form

useForm!

useForm양식을 쉽게 관리하기 위한 사용자 정의 Hook이다. 그것은 소요 선택적 파라미터를 넣어 사용한다.
https://react-hook-form.com/api/useform/ [useForm 공홈]

validator

useForm은 다음 유효성 검사를 지원 한다.

• required
• min /maxLength
• pattern
• validate

//useFormTest.jsx
import { useState } from "react";
import { useForm } from "react-hook-form";
export const UseFormTest = () => {
  const [data, setData] = useState(null);
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const onSubmit = (data) => {
    setData(data);
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <span>이름: </span>
      <input {...register("name", { required: true })} /> <br />
      <span>이메일: </span>
      <input
        {...register("email", {
          pattern: {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
            message: "이메일 형식으로 입력해주세요",
          },
        })}
      />
      <br />
      <p>{errors.email && errors.email.message}</p>
      <span>휴대폰: </span>
      <input
        type="number"
        {...register("phone", {
          maxLength: { value: 13, message: "13자이내로 입력해주세요" },
          pattern: { value: /[0-9]/g, message: "숫자만 입력해주세요" },
        })}
      />{" "}
      <br />
      <p></p>
      <input type="submit" />
    </form>
  );
};

출처 https://ichi.pro/ko/yangsig-yuhyoseong-geomsa-mich-react-hook-yangsig-245271085508200 [블로그]
https://react-hook-form.com/kr/get-started/ [공홈]

요런식으로 쓰면됨 오늘 월요일이니까 셤셤 할꼬임... ㅎㅎ