클론코딩 #8 | To-Do List 만들기 (2) (Form Validation, React-Hook-Form)

onSubmit, React-Hook-Form 으로 대체하기

1. handleSubmit 함수를 useForm() 에서 받아옵니다.

// ToDoList.tsx

...
function ToDoList() {
  const { register, watch, handleSubmit } = useForm();
  ...

• handleSubmit 이 validation 을 담당하게 됩니다.
• preventDefault 도 담당합니다.

2. onValid 함수를 생성해줍니다. 해당 함수는 react-hook-form 이 모든 validation 을 다 마쳤을 때만 호출됩니다.
3. <form> 태그에 onSubmit 이벤트를 등록 해줍니다. 그리고 onSubmit 이벤트에 handleSubmit 으로 할당해줍니다.
4. handleSubmit 은 두 개의 인자를 받습니다. 하나는, 데이터가 유효할 때 호출되는 함수(onValid). 둘째는, 데이터가 유효하지 않을 때 호출되는 함수입니다(onInvalid). onVlid 는 필수, onInvalid 는 필수가 아닙니다.
5. onValid 함수는 인자로 data를 받습니다. onValid 함수 내부에 console.log(data) 해준 후 watch 함수는 삭제합니다.
6. input 태그 register 함수 내에 인자로 { minLength: 10 } 을 적어줘서 validation 조건 을 지정해줍니다.
7. useForm 함수의 formState 함수를 불러오고 console.log(formState.errors) 를 해주면 validation 조건 이 안 맞았을 때 에러 유무와 에러 타입 보여주는 것을 알 수 있습니다.

// ToDoList.tsx

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

8. 추가로 minLength 를 지정해줬던 input 태그 내의 자바스크립트 코드를 객체로 수정해주면 에러발생시 message 도 받아 볼 수 있습니다.

// ToDoList.tsx

...
function ToDoList() {
  const { register, handleSubmit, formState } = useForm();
  const onValid = (data: any) => {
    console.log(data);
  };
  console.log(formState.errors);
  return (
    <div>
      <form onSubmit={handleSubmit(onValid)}>
        <input
          {...register("toDo", {
            minLength: {
              value: 10,
              message: "too short",
            },
          })}
          placeholder="Write a to do"
        />
        ...