[React] React Hook Form 사용하기

React Hook Form이란?

폼의 유효성 검사를 쉽고 간단하게 해주는 라이브러리

장점

코드의 양이 적음
Input 창과 child component의 리렌더링 분리
간단한 유효성 검사

설치하기

npm install react-hook-form

리액트 훅 폼 없이 폼 만들기

import { useState } from "react";

function ToDoList() {
  const [todo, setTodo] = useState("");
  //에러 만들기
  const [toDoError, setToDoError] = useState("");

  //onChange 이벤트
  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
    const {
      currentTarget: { value },
    } = event;
    setTodo(value);
  };
  //onSubmit 이벤트
  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    //글자수가 10자 미만일 때 에러가 발생
    if(todo.length < 10) {
        return setToDoError("글자 수가 부족함")
    }
    setToDoError("");
    console.log(todo);
  };
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input onChange={onChange} value={todo} placeholder="Write a to do" />
        <button>Add</button>
        {/* 에러표시 */}
        {toDoError !== "" ? toDoError : null}
      </form>
    </div>
  );
}
export default ToDoList;

최소 Input의 값(todo) state, onChange, onSubmit 이벤트를 필요로 함
이 코드들을 리액트 훅 폼으로 간결하게 작성할 수 있다.

🧡register

사용하기(ts)

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

//register name별로 타입 지정해줘야함 ㅡㅡ;
interface IFormInput {
  firstName: String;
  gender: GenderEnum;
}
const { register, handleSubmit } = useForm<IFormInput>();
<form onSubmit={handleSubmit(onSubmit)}>
	<input {...register("값의 이름")} />
  ...

register에는 onChange, onBlur, ref를 갖고 있음.
console.log(register("toDo")); 콘솔찍기

{name: 'toDo', onChange: ƒ, onBlur: ƒ, ref: ƒ}
name: "toDo"
onBlur: async event => {…}
onChange: async event => {…}
ref: ref => {…}
[[Prototype]]: Object

이를 {...} 스프레드 문법으로 풀어내면 input에 name, onBlur, onChange, ref가 props로 들어감