[리액트] React-hook-form

리액트에 내장된 hook만으로 컴포넌트 속 form을 검증하기 위해서는

  const [toDo, setToDo] = useState("");
  const [toDoError, setToDoError] = useState("");
  const onChage = (event: React.FormEvent<HTMLInputElement>) => {
    const {
      currentTarget: { value },
    } = event;
    setToDoError("");
    setToDo(value);
  };
  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (toDo.length < 10) {
      return setToDoError("To Do Should Be Longer");
    }
    console.log("Submit");
  };
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input onChange={onChage} value={toDo} placeholder="Write a to do" />
        <button>Add</button>
        {toDoError !== "" ? toDoError : null}
      </form>
    </div>
  );

useState와 function을 각각의 에러, 메세지마다 따로 정의해줘야 한다. 매우 길고 번거로움.

 

 

-

react-hook-form을 사용한다면 useForm 하나로 data를 array에 스프레드하거나 검증하는 등 많은것을 해결할 수 있다.

 const {
    register,
    handleSubmit,
    formState: { errors },
    setError,
 } = useForm<IFom>({
    defaultValues: {
      email: "@naver.com",
   },
 });

form과 input이 많아질수록 유용할듯

 

https://react-hook-form.com/api/useform