React-hook-form 써보기

npm i react-hook-form

터미널에서 먼저 npm으로 react-hook-form 설치해줍니당!

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

App.tsx

function App() {
	const {register, handleSubmit} = useForm();
}

App 컴포넌트에서 useForm이라는 훅을 불러와 사용할 수 있습니다.

App.tsx

function App() {
  const {register, handleSubmit} = useForm();
  
  return (
    <form onSubmit={
        handleSubmit((data) => alert(JSON.stringify(data)))
      }>
      <input {...register("email")}
      <input {...register("password")}
    </form>
  )
    
}

다른 옵션들이 더러 있지만 기본적으로 가장 많이 사용하는 건 register와 handleSubmit일 것 같습니다.

register는 함수인데요 보통 input 태그에 속성을 넣어줄 때 사용하고, 함수의 인자값으로 input에 지정할 식별자를 넘겨줘서 설정할 수 있습니다.

또한 handleSubmit은 form의 onSubmit에 주로 사용되는데 콜백함수의 첫 번째 인자로 form의 data를 넘겨줍니다.

data는 아무래도 보통 비동기함수에 의해 JSON 형태로 전송되는 일이 많아서 기본적으로 JSON 형식으로 변환시켜주는 것 같습니다!

<label htmlFor="email">email</label>
          <input
            id="email"
            type="text"
            placeholder="test@test.com"
            {...register("email", {
              required: "이메일은 필수입니다",
              pattern: {
                value: /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}$/,
                message: "이메일 형식이 아닙니다",
              },
            })}
            aria-invalid={errors.email ? "true" : "false"}
          />

또한 register 함수의 옵션으로 다양한 값들을 줄 수 있는데 이건 내일 이어서 적어보겠습니다!