리액트를 사용하여 폼을 만들 때 formik, redux-form, react-hook-form 등의 라이브러리를 활용해서 비교적 간단하게 만들어볼 수 있다. 불필요한 렌더링을 최소화하고, 마운팅이 빠르며, 타입스크립트와 잘 맞는 장점을 가진 react-hook-form과 yup을 활용하여 폼을 구현해봤고, 다음을 위해 기록해봤다.

react-hook-form

리액트 앱을 만들고 각각의 라이브러리를 설치한 후,

npm install react-hook-form yup @hookform/resolvers

파일을 만든 후, import를 시킨다.

// register.js

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

useForm( )에 필요한 register, handleSubmit, 그리고 errors를 할당해준다.

const {
    register,
    handleSubmit,
    formState: { errors }, // 버전 6라면 errors라고 작성함.
  } = useForm({
    resolver: yupResolver(schema),
  });

react-hook-form에서 register는 제어되지 않은 컴포넌트를 Hook과 연결하여 값이 검사될 수 있도록 하고, 폼이 제출될 때 한꺼번에 모아지도록 하는 것이라고 한다. input 값을 쉽게 관리해주는 것이라고 생각하면 될 것 같다.

기본 예시(yup 없이 사용할 경우)

<input {...register('name값', { 유효성 검사 방식 })} />

// 버전 6에서는 아래와 같이 작성함.
<input ref={register} />

해당 라이브러리에서 지원하는 유효성 검사방식은 required, min, max, minLength, maxLength pattern, validate로 아래와 같이 사용할 수 있다.

<input {...register('age', {min: 18, max: 120})} />

handleSubmit을 사용하면 기존에 폼을 제출할 때 나타나는 새로고침 현상이 나타나지 않는다. 따라서 event.preventDefault( )를 해주지 않아도 된다.

yup

폼의 유효성을 검사하는 yup에서 schema를 설정해야한다.

const schema = yup.object().shape({
  firstname: yup.string().required("firstname is required."),
  lastname: yup.string().required("lastname is required"),
  email: yup.string().email().required("email is required"),
  password: yup
    .string()
    .min(8)
    .max(15)
    .required("password must be 8 - 15 characters."),
  confirmPassword: yup.string().oneOf([yup.ref("password"), null]),
});

각각의 input의 name 속성에 지정한 값을 그대로 입력하고, string인지 number인지, 최소 및 최대 글자수 등 검사해야할 사항을 입력한 뒤에 제출 전 꼭 입력해야하는 사항이면 required( )를 마지막에 넣어준다.

required( )의 괄호 안에는 입력하지 않았을 때 보여줄 커스텀 메시지를 넣어줄 수 있다. 빈 괄호로 남길 경우 yup에서 디폴트로 제시하는 메시지가 나타난다.

confirmPassword는 앞에 작성한 password와 다를 경우에 에러 메시지가 나타날 수 있도록 ref( )를 지정했고, 아래와 같이 코드를 작성했다.

<input type="password" name="confirmPassword" 
placeholder="confirm password" 
{...register("confirmPassword")} />
<p>{errors.confirmPassword && "confirm your password"}</p>

참고

한 가지 주의할 점은 버전별로 차이점이 있다는 것이다. 사이트에 들어가보면 각 버전별로 상세하게 정리되어있으므로 문서를 읽어보길 추천한다😊
https://react-hook-form.com/