클론코딩 #9 | To-Do List 만들기 (3) (Form Errors, React-Hook-Form)

Form Errors

• 또다른 Validation 방식이 있는데, 정규식(RegExp) 입니다.
  • RegExp : 참고 사이트 (https://regex101.com)
    • 문자열이 어떤 종류인지, 어떻게 생겨야하는지를 알려줄 수가 있습니다.
    • 한국어, 숫자 정규 표현식 사용, (/[ㄱ-ㅎㅏ-ㅣ가-힣0-9]/)
    • span 태그를 활용하여 formState.errors.객체명.message 를 값으로 줘서 에러메세지를 웹 페이지 내에 보여주어 사용자에게 알려줍니다.

// ToDoList.tsx

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

interface IForm {
  toDo: string;
}

function ToDoList() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<IForm>();
  const onValid = (data: any) => {
    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;