[react-hook-form + typscript] 리액트 훅 폼 타입스크립트로 사용하기

1. 폼의 입력 값 데이터 타입 지정

나 같은 경우에는 로그인 기능을 변경할 것이기 때문에 email, password 값의 타입을 지정해주었다.

export interface LoginData {
  email: string;
  password: string;
}

2. useForm() hook 에 제네릭 처리

const {
  register,
  handleSubmit,
  formState: { errors },
} = useForm<LoginFormData>({
  mode: "onSubmit",
  reValidateMode: "onChange",
});

나 같은 경우에는 구조분해할당을 통해 register, handleSubmit, formState의 errors 객체를 사용해주었다. useForm 에 제네릭을 주어 들어올 데이터의 타입을 넣어준다.

2-1. handleSubmit 함수 사용하기

handleSubmit 은 폼이 제출되었을 때 호출하는 함수이다. onSubmit, onError의 함수를 두어 관리해주고 있다.

const onSubmit: SubmitHandler<LoginFormData> = (data) => {
  //api 호출
};
const onError: SubmitErrorHandler<LoginFormData> = (error) => {
  console.log(error);
};

3. watch 와 useRef()

useRef의 타입 정하기 게시글을 참고하여 useRef에 string 으로 타입을 지정해주었다.

전체 코드

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

const {
  register,
  handleSubmit,
  formState: { errors },
} = useForm<LoginFormData>({
  mode: "onSubmit",
  reValidateMode: "onChange",
});

const onSubmit: SubmitHandler<LoginFormData> = (data) => {
  //api 호출
};
const onError: SubmitErrorHandler<LoginFormData> = (error) => {
  console.log(error);
};

return(
  <form onSubmit={handleSubmit(onSubmit, onError)}>
  	<input 
      {...register('email',{
        pattern:{~~}
      })
      }
	/>
  </form>
)

= 데이터 타입을 지정해주고, useForm에 제네릭 처리, 사용함수 타입 지정해주면 끝

같은 방식으로 회원가입도 수정해줄 예정