[React Hook Form] React Hook Form 톺아보기

라이브러리 없이 Form을 만들고 돌아보니 코드 양이 어마어마하다...

 

React Hook Form을 사용해서 조금 더 쉽게 Form을 만들어보고 싶어서 도전!

 

아직 공부하며 사용 중이라 완벽하게 마스터하지는 못했지만 아는 것만 정리해보려 한다.

 

React Hook Form

 

설치

npm install react-hook-form

 

사용법

const { register, handleSubmit, watch, formState: { errors } } = useForm();

 

 

register

 <input {...register("firstName", { required: true })} />

유효성 검사에 사용할 요소를 register를 이용해서 연결한다.

register에 사용할 수 있는 유효성 검사 목록은 아래와 같다.

• required (필수 값)
• min (최소 값)
• max (최대 값)
• minLength (값의 최소 길이)
• maxLength (값의 최대 길이)
• pattern (값을 정규식 패턴으로 검사)
• validate (콜백 함수를 전달하거나 객체를 사용해 여러 콜백 함수를 전달하여 여러 유효성 검사를 할 수 있다)

 

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  console.log(errors);

  const onSubmit = () => {};

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("id", { required: true })} />
      <button>submit</button>
    </form>
  );

 

유효성 검사에 required만 넣어서 사용해보자

input에 아무 값도 입력하지 않고 submit 버튼을 클릭하면 formState의 errors 객체에 error 정보가 입력된다.

여기서... register의 첫 번째 인자가 errors 상태의 키값이 된다.

 

console창 errors상태

 

true대신 에러때 사용할 에러 메시지를 입력할 수 있다.

 

 <input {...register("id", { required: "필수 값입니다." })} />

 

빈 문자열 상태에서 submit 버튼을 누르게 되면 required의 값이 에러 메시지에 적용되는 것을 볼 수 있다.

 

에러메세지가 적용된 사진

 

다른 유효성 검사는 에러메세지를 등록하는 방법이 조금 다르다.

 

  <input
    {...register("id", {
      maxLength: { value: 2, message: "최대 2글자 입니다" },
    })}
  />;

 

이렇게 사용할 유효성 검사 키값과 그 안에 객체에 검사에 사용할 제한값? (value)와 에러 메시지로 사용할 message의 값을 사용해준다.

 

지금은 maxLength의 value값을 2로 해두었으니 3글자 이상을 입력하고 submit버튼을 클릭하면 에러 메시지를 확인할 수 있다.

 

maxLength 에러메세지

 

꿀팁 아닌 꿀팁 (styled-component 같이 사용하기)

사실 여기서 많이 헤맸다...

 

forwardRef를 사용해서 사용할 요소에 register를 연결해주면 된다.

import React, { forwardRef } from "react";

const Input = forwardRef(({ name, ...restProps }, ref) => {
  return <input name={name} ref={ref} {...restProps} />;
});

Input.displayName = "Input";

export default Input;

 

 

handleSubmit

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  console.log(errors);

  const onSubmit = (data) => {
    console.log("submit", data);
  };

  const onError = (error) => {
    console.log("error", error);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit, onError)}>
      <input {...register("id", { required: true })} />
      <button>submit</button>
    </form>
  );

 

form태그의 onSubmit에 handleSubmit을 사용한다.

 

첫 번째 인수로 들어가는 onSubmit은 submit 동작 시 에러가 없을 때 동작하며

두 번째 인수로 들어가는 onError는 submit 동작 시 에러가 있을 때 동작한다.

 

위의 코드에서 현재 required값을 검사하고 있으니 문자열을 입력하고 submit 버튼을 클릭하면 onSubmit이 동작할 것이다.

 

onSubmit 실행 console화면

onSubmit의 인수로 들어가는 데이터는 submit에 사용되는 데이터들이다.

register에 사용한 문자열 id를 키값으로 가지게 된다.

 

이번에는 빈 문자열로 테스트 submit 버튼을 클릭하게 되면 onError가 동작할 것이다.

 

onError 실행 console화면

 

 

watch

watch는 단어 그대로 내가 입력 값을 확인 할 수 있다.

 

  const {
    register,
    handleSubmit,
    formState: { errors },
    watch,
  } = useForm();

  console.log(watch("id"));

  return (
    <form onSubmit={handleSubmit(onSubmit, onError)}>
      <input {...register("id", { required: true })} />
      <button>submit</button>
    </form>
  );

 

watch("id") console 화면

watch의 인수로 register에 등록한 id를 키 값으로 해당 입력 값을 확인할 수 있다.

 

 

formState

formState는 여러 값을 가지고 있지만 errors만 사용해봐서 errors에 대해서만 적고 나머지는 추후에(?) 업데이트할 예정

 

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  console.log(errors);

  const onSubmit = (data) => {
    console.log("submit", data);
  };

  const onError = (error) => {
    console.log("error", error);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit, onError)}>
      <input {...register("id", { required: true })} />
      <button>submit</button>
    </form>
  );

 

errors console 화면

 

erros를 console.log로 확인해보면 처음에는 아무 에러가 발생하지 않아 빈 객체로 존재한다.

 

위의 코드를 사용해서 아무 값도 입력하지 않고 에러를 발생시켜보자

 

required errors console 화면

 

이렇게 빈 객체였던 errors에 register에 입력했던 id를 키값으로 에러 상태가 추가된다.