react-hook-form 라이브러리

: 컴포넌트 안에 반복적으로 사용되는 useState( )를 간소화할 수 있는 라이브러리
react-hook-form 사이트

📍설치

npm install react-hook-form

📍useForm( )

▪ hook 불러와서 사용

import { useForm } from "react-hook-form";

▪ register함수는 별도의 이벤트 핸들러를 사용하지 않고도 자체적으로 이벤트 발생여부를 확인가능 - 이벤트 핸들러 역할
▪ watch 함수: form 태그 안에 입력된 값의 변화를 확인 후 적용해주는 역할

const TodoList = () => {
  const { register, watch} = useForm();
  return (
    <div>
      <form>
        <input
          {...register("email")} 
          placeholder="Write a email"
        />
        <button>Add</button>
      </form>
    </div>
  );
};

export default TodoList;

▪ handleSubmit 함수 : onSubmit 이벤트 헨들러 작동 시, 실행되는 함수로 콜백함수를 받음
(실제, 콜백함수를 활용해서 실행문 작동)

const TodoList = () => {
  const { register, watch, handleSubmit } = useForm();
  const onValid = (data: any) => {
    console.log(data);
  };
  return (
    <div>
      <form onSubmit={handleSubmit(onValid)}>
        <input
          {...register("email")}
          placeholder="Write a email"
        />
        <button>Add</button>
      </form>
    </div>
  );
};

export default TodoList;

⇒ handleSubmit 함수를 인자로 받으면 해당 함수에 data라는 인자를 넘겨줌

⇒ 버튼 클릭 시 값 console값 출력

유효성검사도 가능

▪ 특정 조건에 부합했을 때, 어떤 이벤트가 발생
- required : 필수입력
- minLength : 최소입력 길이 / maxLength : 최대입력 길이

const TodoList = () => {
  const { register, watch, handleSubmit } = useForm();
  const onValid = (data: any) => {
    console.log(data);
  };
  return (
    <div>
      <form onSubmit={handleSubmit(onValid)}>
        <input
          {...register("email", { required: true })} //입력되지 않으면 넘어가지 않도록 설정(필수값)
          placeholder="Write a email"
          />

        <input
          {...register("userName", { required: true, minLength: 2 })} //최소 입력 지정
          placeholder="Write a userName"
          />
        <button>Add</button>
      </form>
    </div>
  );
};

export default TodoList;

◽ 메시지 입력

const TodoList = () => {
  const {
    register,
    watch,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const onValid = (data: any) => {
    console.log(data);
  };

  return (
    <div>
      <form onSubmit={handleSubmit(onValid)}>
        {/* add버튼을 클릭하면 값 출력 */}
        <input
          {...register("email", { required: "Email is Required" })} //입력되지 않으면 넘어가지 않도록 설정(필수값) -> require 기본값 true => 조건에 맞을 때 메세지를 띄울 수 있음
          placeholder="Write a email"
          />
        <span>{errors?.email?.message as string}</span>
        <input
          {...register("passWord", {
            required: true,
            minLength: {
              value: 5,
              message: "Your password is too short",
            },
          })}
          placeholder="Write a passWord"
          />
        <span>{errors?.passWord?.message as string}</span>
        <button>Add</button>
      </form>
    </div>
  );
};

▪ pattern

<input
  {...register("email", {
    required: true,
    pattern: {
      value: /^[A-Za-z0-9]+@naver.com/gm,
      message: "Only naver.com emails allowed",
    },
  })} //입력되지 않으면 넘어가지 않도록 설정(필수값) -> require 기본값 true => 조건에 맞을 때 메세지를 띄울 수 있음
  placeholder="Write a email"
  />

▪ validate
: 특정 단어 작성 제한

<input
  {...register("firstName", {
    required: "Write Here",
    validate: (value) => !value.includes("test"),
  })}
  placeholder="Write a firstName"
  />

⇒ ‘test’가 들어가면 넘어가지 않도록 지정

▪ setError함수 : 특정필드에 에러를 발생

    const TodoList = () => {
      const {
        register,
        watch,
        handleSubmit,
        formState: { errors },
        setError,
      } = useForm();
      const onValid = (data: any) => {
        if (data.password !== data.passWord1) {
          setError("passWord1", { message: "passWord id not the same..." });
        }
      };
    

• { shouldFocus: true }는 setError로 설정한 필드에 에러가 발생했을때 foucs가 이동되는 옵션

  if (data.passWord !== data.passWord1) {
    setError(
      "passWord1",
      { message: "passWord id not the same..." },
      { shouldFocus: true }
    );
  }