React - React-Hook-Form

npm install react-hook-form

실제 앱을 개발할때, 수많은 form을 사용하게 된다. 그 form에 해당하는 state를 작성하려면 매우 귀찮은 일이 된다. 거기서 form validation까지 하게 된다면 굉장히 번거로운 일이 될 수있다.

const [toDo, setToDo] = useState("");
const [toDoError, setToDoError] = useState("");

const onChange = (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("ToDo should be longer");
  }
  console.log("submit");
};

return (
  <div>
  <form onSubmit={onSubmit}>
  <input onChange={onChange} value={toDo} placeholder="Write a to do" />
    <button>Add</button>
{toDoError !== "" ? toDoError : null}
</form>
</div>
  );

react-hook-form에서 제공하는 다양한 함수로 위의 코드를 간결하게 바꿀 수 있다.

register는 onChange, onBlur, onFocus 등에 대한 정보를 담고있는 함수이다.
watch는 form의 입력값들의 변화를 관찰할 수 있게 해주는 함수이다.
handleSubmit는 인자를 두개 받는데, 하나는 데이터가 유효할때, 다른하나는 데이터가 유효하지 않을 때 호출되는 함수이다.
formState는 말 그대로 form의 state를 보여주는데 그중에 error객체가 있다. error객체에서는 에러를 보여주고 그에 따른 메시지도 보여준다.
setError는 코드에서 에러를 발생시킬 때 매우 유용하다.
setValue는 form의 값을 지정해줄 수 있다.