[React Hook Form] React Hook Form 공부 - 1 [7/25 study]

React Hook Form 공부 - 1

 

설치

npm i react-hook-form
yarn add react-hook-form

 

 

useForm 사용하기

react-hook-form과 HTML의 form 요소인 input과 button 등을 연결 시켜주는 함수가 바로 register 함수입니다.

 

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

export default function MyForm() {
    const form = useForm();
    const { register } = form;
    // 한 줄로 쓰려면 아래와 같이 하셔도 됩니다.
    // const { register } = useForm();
    ...
    ...
}

 

register 함수를 이용해서 input이나 button 요소를 react-hook-form 라이브러리와 연결하면 되는데요.

register('username') 이렇게 함수를 실행하면 또 객체를 리턴하는데요. 

이 객체가 리턴하는 항목을 input 항목과 연결시키면 됩니다.

 

export default function MyForm() {
  const { register } = useForm();
  const { name, ref, onChange, onBlur } = register("username");

  return (
    <div className="w-full p-4">
      <form>
        <div className="w-1/3">
          <label htmlFor="username">Username</label>
          <input
            type="text"
            id="username"	// 우리가 register로 만든 "usename" 부분을 input 태그와 연결시켰습니다. 
            name={name}		// 작성할게 너무 많아보임 => react-hook-form은 간단한 방법을 제공해 줍니다
            ref={ref}
            onChange={onChange}
            onBlur={onBlur}
          />
          ...
          ...
}

 

해결

export default function MyForm() {
  const { register } = useForm();

  return (
    <div className="w-full p-4">
      <form>
        <div className="w-1/3">
          <label htmlFor="username">Username</label>
          <input type="text" id="username" {...register("username")} />
          // "{...register("username")}" 처럼 register 함수의 첫 번째 인자로 해당 input의 name을 넣는 겁니다.
          // 즉, input 태그에 있던 name="username" 이 부분이 바로 register 함수의 첫 번째 인자가 되는 거죠. 
          ...
          ...
}

 

email, password도 마저 작성해 보겠습니다.

 

<form>
  <div className='w-1/3'>
    <label htmlFor='username'>Username</label>
    <input type='text' id='username' {...register('username')} />
    <label htmlFor='email'>E-mail</label>
    <input type='email' id='email' {...register('email')} />
    <label htmlFor='password'>Password</label>
    <input type='password' id='password' {...register('password')} />
    <button>Submit</button>
  </div>
</form>