[REACT] React Hook Form

학습일 : 2023. 04. 16

---

React Hook Form 은
리액트에서 form으로 작업하는 경우 좋은 방법 중 하나이다.

---

onChange 이벤트, value, useState 등등 이러한 것들을

React Hook Form의 register 함수가 대체해주게 될 것이다.

사용을 위해 터미널에 입력 후 설치한다.

npm install react-hook-form

react-hook-form의 힘(?)을 사용하기 위해서는useForm이라는 hook을 import해야한다.

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

register함수에는 문자열을 보내주어야 하는데 그것은 name이 된다.
console.log(register("toDo")); 해보면

개발자도구에 이런 것들이 찍혀나오는 것을 볼 수 있다.

이제 input에 register함수가 반환하는 것들을 주면 된다.
onBlur 이벤트, onChange 이벤트, ref, name 이 있음.

 

 

 

<ToDoList.tsx>

  useForm 함수는 많은 것들을 제공하는데, 그 중 하나는 watch이다.
  watch는 form의 입력값들의 변화를 관찰 할 수 있게 해주는 함수이다.

function ToDoList() {
  const { register, watch } = useForm();
  console.log(watch());
  return (
    <div>
      <form>
        <input
          {...register("toDo")}
          placeholder="오늘 해야할 일을 입력하세요"
        />
        <button>추가</button>
      </form>
    </div>
  );
}

export default ToDoList;

 

 

실행결과

 

 

useState 어쩌고 저쩌고

길게 그리고 귀찮게 써주었던 

일련의 모든 과정이 이 한줄의 코드로 해결이 되어버린 것이다.

  const { register, watch } = useForm();

 

 

그리고

이렇게 input이 많아진다고 가정하였을 때에도

각각의 input마다 state를 적어주지 않아도 된다.

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

function ToDoList() {
  const { register, watch } = useForm();
  console.log(watch());
  return (
    <div>
      <form>
        <input {...register("email")} placeholder="email을 입력해주세요." />
        <input
          {...register("firstname")}
          placeholder="firstname을 입력해주세요."
        />
        <input
          {...register("Lastname")}
          placeholder="Lastname을 입력해주세요."
        />
        <input
          {...register("username")}
          placeholder="username을 입력해주세요."
        />
        <input
          {...register("password")}
          placeholder="password을 입력해주세요."
        />
        <input
          {...register("password1")}
          placeholder="password1을 입력해주세요."
        />
        <button>추가</button>
      </form>
    </div>
  );
}

export default ToDoList;

 

 

위대하다 위대해