[React] React Hook Form

bomhada·2022년 4월 7일

React State react hook form react typescript

📘 React study

목록 보기

7/15

React Hook Form

사용하기 쉬운 유효성 검사를 통해 성능이 뛰어나고 유연하며 확장 가능한 form입니다. 공식문서 보기

사용하는 법

React-hook-form 설치하기

명령어를 입력해주세요.

npm i react-hook-form

Form

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

function Note() {
  const {} = useForm();
  
  return(
    <form>
      <input placeholder="Write here!"/>
      <button>Add</button>
    </form>
  );
}

export default Note;

register

register 예약어를 사용하면 form 태그 내의 유효성 검사와 submit 모두 값을 사용 가능하게 만들어줍니다.
register필드를 등록하는 방법은 다음과 같습니다. 관리하고자하는 input에 {...register("key")} 이렇게 비구조 할당으로 넣어줍니다.

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

function Note() {
  const {register} = useForm();
  
  return(
    <form>
      <input
        placeholder="Nickname"
        {...register("nickname")}
      />
      <button>Add</button>
    </form>
  );
}

export default Note;

🚨 사용 시 주의사항으로는 ...register("key") <- 안에 고유한 이름을 설정해야합니다.

Validation

reat-hook-form 라이브러리는 form 태그의 유효성 검사를 쉽게 할 수 있도록 도와주는데,
유효성 검사 규칙들이 지원되는 요소들을 알아봅시다.

required
min
max
minLength
maxLength
pattern
validate

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

function Note() {
  const {register} = useForm();
  
  return(
    <form>
      <input
        placeholder="Nickname"
        {...register("nickname", {
          required: true,
          maxLength: 20
        })}
      />
      <input
        placeholder="Email"
        {...register("email", {
          required: "이메일 입력은 필수 입니다.",
          pattern: /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/
        })}
      />
      <button>Add</button>
    </form>
  );
}

export default Note;

required는 필수로 입력해서 값을 넘겨줘야할 때 사용하는 요소입니다.
선택적으로 입력값을 받고싶을 때는 required를 생략해주면 됩니다.
그리고 required는 true값 외에 텍스트를 넘겨줄 수 있고, 나중에 이 값을 formState:{errors}로 오류 메시지를 넘겨줄 수 있습니다. name 이나 email 값이 입력되지 않으면 submit 버튼을 눌러도 진행이 되지 않고, 입력을 해야만 진행이 됩니다. 그리고 자동으로 입력되지 않은 input칸으로 focus가 됩니다.

정규식 표현

/^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/

^ :문장의 시작
[] : 문자셋 안의 아무문자
+ : 하나 또는 많이

watch

watch 함수를 사용하면 다음과 같이 위에서 지정한 이름과 함께 유저가 입력하는 값을 실시간으로 보여줍니다.

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

function Note() {
  const {register, watch} = useForm();
  console.log(watch());
  
  return(
    <form>
      <input
        placeholder="Nickname"
        {...register("nickname")}
      />
      <button>Add</button>
    </form>
  );
}

export default Note;

handleSubmit

Submit을 관리하기 위한 함수입니다. handleSubmit은 함수를 인자로 받으며 그 함수에 data라는 인자를 넘겨줍니다.

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

function YourNickname() {
  const {register, handleSubmit} = useForm();
  const onSubmit = (data) => {
    console.log(data);
  }
  
  return(
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        placeholder="Nickname"
        {...register("nickname")}
      />
      <button>Add</button>
    </form>
  );
}

export default YourNickname;

console.log(data)를 찍어보면 다음과 같이 출력됩니다.

{nickname: "Melon"}

handleSubmit이 넘겨주는 data값은 watch함수가 마지막으로 출력하는 데이터와 동일합니다.

onError

handleSubmit은 두가지 인자를 받는데 하나는 onSubmit이 정상적으로 작동됐을 때 실행하는 함수이고,
두번째 인자로는 onError로 Form에서 에러가 났을 때 실행되는 함수입니다.

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

function YourNickname() {
  const {register, handleSubmit} = useForm();
  const onSubmit = (data) => {
    console.log(data);
  }
  const onError = (error) => {
  	console.log(error);
  }
  
  return(
    <form onSubmit={handleSubmit(onSubmit, onError)}>
      <input
        placeholder="Nickname"
        {...register("nickname", {
          minLength: {
            value: 5,
            message: "⚠️ 5자 이상 입력하세요."
          },
        })}
      />
      <button>Add</button>
    </form>
  );
}

export default YourNickname;

다음과 같이 코드를 작성하고, 입력값을 주지 않고 submit하게 되면,
에러가 난 타입(minLength)과 작성한 메시지(⚠️ 5자 이상 입력하세요.)가 출력됩니다.

setValue

어떤 값을 변경할 때 사용합니다. 예를 들어, input에 작성 후 submit했을 때, input 칸을 비워주도록 하게 할 수 있습니다.

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

function YourNickname() {
  const {register, handleSubmit, setValue} = useForm();
  const onSubmit = (data) => {
    setValue("nickname", ""); <- 빈 문자열로 변환
  }
  
  return(
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        placeholder="Nickname"
        {...register("nickname")}
      />
      <button>Add</button>
    </form>
  );
}

export default YourNickname;

위 코드는 닉네임 값을 작성 후 submit해주었을 때, setValue가 nickname이란 키 값을 가진 input의 내용을
비워주도록 했습니다.

formState

formState에 들어가는 객체들을 사용해보진 못했지만 errors 객체에 대해서 알아보겠습니다.
위에서 알아본 onError과는 다른 점이라면 사용자가 잘못된 입력을 하였을 때, errors를 사용해서 각 input에 저장되어있는 message를 사용자에게 알려줄 수 있도록 해준다는 것입니다.

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

interface IForm {
  nickname: string;
}

function YourNickname() {
  const { register, handleSubmit, setValue, formState: { errors } } = useForm<IForm>();
  const onSubmit = ({ nickname }: IForm) => {
    setValue("nickname", "");
  };

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input
          placeholder="Nickname"
          {...register("nickname", {
            required: true,
            minLength: {
              value: 5,
              message: "⚠️ 5자 이상 입력해주세요."
            }
          })}
        />
        <button>Add</button>
      </form>
      <span>{errors.nickname?.message}</span>
    </>
  );
}
export default YourNickname;