[React Hook Form] React Hook Form 공부 - 3 (onSubmit 핸들러 제어 방법) [7/25 study]

React Hook Form 공부 - 3

 

React-Hook-Form의 onSubmit 핸들러 제어 방법

 

보통 리액트에서는 form-submit 처리를 handleSubmit라는 이름의 함수를 만들어서 사용하는데요. 

react-hook-form에서도 이 이름의 함수를 사용합니다. 

대신 handleSubmit 함수에는 사용자가 작성한 함수를 인자로 넣어줘야 합니다.

 

const { register, control, handleSubmit } = useForm();

const  onSubmit = (data) => {
  console.log("Form submitted.", data)
}

renderCount++;
  return (
    <div className="w-full p-4">
      <h1 className="text-2xl mb-5"> Render count : {renderCount / 2}</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
      ...
      ...

 

onSubmit 함수에는 인자가 들어갈 수 있는데요.

이 인자에 우리의 data가 들어 있습니다. 테스트 해보겠습니다.