[TypeScript] React Hook Form & Yup으로 실시간 유효성 검사하기

 

유효성 검사(유효성 체크)

유효성 검사(유효성 체크)는 데이터가 올바른지 확인하는 과정이다.

로그인, 회원가입 등을 할 때 사용자가 유효한 데이터를 입력했는지 체크해 준다.

 

 

formik vs react hook form

React에서 가장 많이 사용하는 library는 formik과 react hook form이다.

 

formik

가장 많이 사용되는 라이브러리이며 사용하기 쉽다.

 

react hook form

타입스크립트가 기본적으로 내장되어 있다.

종속성이 없는 작은 라이브러리이다.

불필요한 리렌더링을 최소화하여 작성해야 하는 코드의 양을 줄여준다.

 

➔ 타입스크립트 프로젝트에서 필요하므로 react hook form을 사용하기로 결정.

 

 

React Hook Form

 

react hook form 설치

// npm
npm install react-hook-form

// yarn
yarn add react-hook-form

 

 

useForm 

useForm은 양식을 쉽게 관리할 수 있는 custom hook이고 옵션을 사용한다.

예시)

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

type Inputs = {
  example: string,
  exampleRequired: string,
};

export default function App() {
  const { register, handleSubmit, watch, formState: { errors } } = useForm<Inputs>();
  const onSubmit: SubmitHandler<Inputs> = data => console.log(data);

  console.log(watch("example")) // watch input value by passing the name of it

  return (
    /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* register your input into the hook by invoking the "register" function */}
      <input defaultValue="test" {...register("example")} />
      
      {/* include validation with required or other standard HTML validation rules */}
      <input {...register("exampleRequired", { required: true })} />
      {/* errors will return when field validation fails  */}
      {errors.exampleRequired && <span>This field is required</span>}
      
      <input type="submit" />
    </form>
  );
}

 

 

Yup

유효성 검사를 지원하는 스키마 빌더 중 가장 많이 쓰임.

스키마 기반 입력 데이터의 유효성을 검사하고 오류 또는 유효한 결과를 반환한다.

 

1. yup 설치

// npm
npm install @hookform/resolvers yup

// yarn
yarn add @hookform/resolvers yup

 

2. 검증을 위한 스키마를 준비하고 React Hook Form을 사용하여 입력을 등록

import { useForm } from "react-hook-form";
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from "yup";

const schema = yup.object({
  firstName: yup.string().required(),
  age: yup.number().positive().integer().required(),
}).required();
type FormData = yup.InferType<typeof schema>;

export default function App() {
  const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
    resolver: yupResolver(schema)
  });
  const onSubmit = (data: FormData) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} />
      <p>{errors.firstName?.message}</p>
        
      <input {...register("age")} />
      <p>{errors.age?.message}</p>
      
      <input type="submit" />
    </form>
  );
}

 

 

---

 

참고링크 : https://www.react-hook-form.com/get-started/#SchemaValidation