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

setError of useForm

// ToDoList.tsx

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

interface IForm {
  toDo: string;
}

function ToDoList() {
  const {
    register,
    handleSubmit,
    formState: { errors },
    setError,
  } = useForm<IForm>();
  const onValid = (data: IForm) => {
    if (data.toDo.includes("게임")) {
      setError(
        "toDo",
        { message: "게임을 하면 안됩니다." },
        { shouldFocus: true }
      );
    }
    console.log(data);
  };
  return (
    <div>
      <form onSubmit={handleSubmit(onValid)}>
        <input
          {...register("toDo", {
            minLength: {
              value: 10,
              message: "too short",
            },
            pattern: {
              value: /^[ㄱ-ㅎㅏ-ㅣ가-힣0-9]/,
              message: "only korean & numbers",
            },
          })}
          placeholder="Write a to do"
        />
        <button>Add</button>
        <span>{errors?.toDo?.message}</span>
      </form>
    </div>
  );
}

export default ToDoList;

• input 태그에 걸려 있는 제약이 없으니 onSubmit 이벤트 동작 합니다.

validate attribute at input

// ToDoList.tsx

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

interface IForm {
  toDo: string;
}

function ToDoList() {
  const {
    register,
    handleSubmit,
    formState: { errors },
    setError,
  } = useForm<IForm>();
  const onValid = (data: IForm) => {
    if (data.toDo === "컴퓨터게임을 합니다.") {
      setError(
        "toDo",
        { message: "게임을 하면 안됩니다." },
        { shouldFocus: true }
      );
    }
    console.log(data);
  };
  return (
    <div>
      <form onSubmit={handleSubmit(onValid)}>
        <input
          {...register("toDo", {
            minLength: {
              value: 10,
              message: "too short",
            },
            pattern: {
              value: /^[ㄱ-ㅎㅏ-ㅣ가-힣0-9]/,
              message: "only korean & numbers",
            },
            validate: {
              noYoutube: (value) =>
                value.includes("유튜브") ? "유튜브를 보면 안됩니다." : true,
            },
          })}
          placeholder="Write a to do"
        />
        <button>Add</button>
        <span>{errors?.toDo?.message}</span>
      </form>
    </div>
  );
}

export default ToDoList;

• input 태그에 직접 제약이 걸려있다보니 onSubmit 이벤트 동작 안합니다.

사견

• 아예 onSubmit 이벤트 동작 제한을 위해서 input 태그에 validate attribute 를 사용하는 것이 더 좋다고 생각이 들었습니다.

• 다만 아직 제가 공부가 부족한 것일 수도 있으니 setError 와 validate 둘 다 계속 공부하며 알맞게 사용하겠습니다.

• 이번에 공부한 react-hook-form 을 사용하면 input 태그가 여러개 있을때에(예를들어 회원가입창) 1)데이터 관리와 2)유효성 검사 측면에서 장점이 있음을 확안할 수 있었습니다.

다음 글부터는 다시 Recoil 에 대해 더 집중하여 공부하도록 하겠습니다.