Carrot market 정복 노트 [6] - "React Hook Form"

Jay·2022년 3월 15일

Carrot market 정복 노트

목록 보기

6/8

React Hook Form ?

React Hook Form 은 Input validation, form submit, error 등을 쉽게 핸들링 할수 있게 해주는 package 이다. 또한, input validation 같은경우에 inspctor 페이지에서 validation form을 user가 고칠수 있게되는 경우가 있는데 이것 또한 react hook form 을통하여 자바스크립트에서 제한 가능하다.

React Hook Form Setup

yarn add react-hook-form 또는 npm i react-hook-form --legacy-peer-deps 으로 설치해준다. legacy-peer-deps 는 리액트 18 rc 버전을 사용하고 있기에 peeDependencies가 자동으로 설치되는 기능을 무시 해주어 react 18 rc 버전과 react Hook form 을 사용할수 있게되는 것이다.

React Hook Form 사용법

먼저 React hook form 을 import 한뒤 register 함수를 console.log로 출력 해보면, name,onBlur,onChange,ref 가 담긴 obj 로 나온다.

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

interface LoginForm {
  username: string;
  password: string;
  email: string;
} //login form 에 들어갈 타입 선언

export default function Forms() {
  const { register, handleSubmit, formState: {errors} } = useForm<LoginForm>();
  // formState 객체 안에서 errors를 사용하였으며 이를 통해 errors에 담겨있는 메세지들을 웹 화면에 출력가능하다.
  const onValid = (data: LoginForm) => {
    console.log("im valid");
  };
  
  const onInvalid = (errors: FieldErrors) => {
  //FieldErrors는 typescript에서 error을 위해 제공 되는 객체 이다.
    console.log(errors);
  };
  
  
  return (
    <form onSubmit={handleSubmit(onValid, onInvalid)}>
      <input
        {...register("username", {
          required: "Username is required",
          minLength: {
          	message: "The username should be longer than 5 chars.",
          	value: 5,
            //User name is required라는 validation 메시지 이외로 만약 minLength가 5보다 작은경우 minLenght 안에 설정해둔 message의 데이터가 담긴다.
        })}
        type="text"
        placeholder="Username"
        required
          />
      <input 
        {...register("email", { required: "Email is required" })}
        type="email"
        placeholder="Email"
      />
      {errors.emial?.message}
      // formState에서 받은 errors객체에서 만약 validationRule 에 의해 email 검출되어 있다면, email 내에 설정된 message를 출력.
      <input
        {...register("password", { required: "Password is required" })}
        type="password"
        placeholder="Password"
        required
      />
      <input type="submit" value="Create Account" />
    </form>
  );
}

※ Point (register)

useForm() 에서 register 함수를 {...register("username"),{validationRules} 이처럼 사용 하기만 하므로써, useState와 events 들에 관한 코드가 생략된다. 여기서 ...(spread operator)는 register 안에있는 모든 porps를 불러오겠다는 의미.
register의 두번째 인자는 브라우저가아닌 자바스크립트 내에서의 validation rule을 추가해 validation 규칙을 설정 할수 있게된다.
validation 을 커스텀 추가 하는 방법 또한 있다. 그 방법은, ex) register 객체 안에서 validate: { notGmail: (value) => !value.includes("@gmail.com") || "Gmail is not allowed"} 이처럼 사용하면 할수 있다.

※ Point (handleSumit)

handleSubmit 이라는 함수에는 두개의 함수가 arg으로 포함되어 있는데, onValid(유효할때) 라는 함수와 onInValid(비유효할때) 라는 함수를 받을수 있다.
From 태그 내에 onSubmit={handleSubmit(onValid, Invalid)} 를 넣어주기만 해도 event.preventDefault 기능이 자동 적용이 되며, 유효와 비유효 시에 대한 처리를 할수 있다.

※ Point (formState)

formState 객체에 많은 것들이 존재하는데 그중 errors 를 예를들어 사용 하게 된다면, error 메세지가 담긴것을 화면에 출력해줄수 있다.

중요 Tip
const { register, handleSubmit, formState: {errors} } = useForm<LoginForm>(mode: "onChange");
위의 코드 처럼 mode 를 추가하고 "onChange" 옵션을 주게 되면 유저가 input 폼 입력과 동시에validation 여부 error 메세지를 바로 유저가 확인 할수 있게 되며, submit을 하지 않고도 유저는 validation 규칙을 확인할수 있게 된다.

이외 알아두면 좋을것들

watch() : 또한 유용하게 사용 되며, 이것은 하나의 field 나 모든 field의 변화에 대해 확인 하고싶을때 쓰일수 있다.
setValue("바꾸고 싶은 이름", "바뀌게 될 이름") : input에 초기 값을 넣어줄수 있다.
setError("전역지역의 error 타입", {message: "There is no connection with database"}) : 이 예시 코드 처럼 api 호출시 error 를 설정 할수 있다. 화면단에 error 메세지를 표기 하고 싶다면 {errors.errors?.message} 와 같이 출력시킬수 있다.
reset(), resetField() : submit 이후 form 들의 초기화 시키고 싶을때 사용된다.

Jay

React js 개발자

이전 포스트

Carrot market 정복 노트 [5] - "Prisma database setup"

다음 포스트

Carrot market 정복 노트 [6] - "React Hook Form"