[React] React Hook Form 사용하기

soyeon·2022년 3월 9일

React TIL react hook form

TIL

목록 보기

14/32

React Hook Form이란?

공식 홈페이지 : https://react-hook-form.com/

폼의 유효성 검사를 쉽고 간단하게 해주는 라이브러리

장점

코드의 양이 적음
Input 창과 child component의 리렌더링 분리
간단한 유효성 검사

설치하기

npm install react-hook-form

리액트 훅 폼 없이 폼 만들기

import { useState } from "react";

function ToDoList() {
  const [todo, setTodo] = useState("");
  //에러 만들기
  const [toDoError, setToDoError] = useState("");

  //onChange 이벤트 
  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
    const {
      currentTarget: { value },
    } = event;
    setTodo(value);
  };
  //onSubmit 이벤트
  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    //글자수가 10자 미만일 때 에러가 발생
    if(todo.length < 10) {
        return setToDoError("글자 수가 부족함")
    }
    setToDoError("");
    console.log(todo);
  };
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input onChange={onChange} value={todo} placeholder="Write a to do" />
        <button>Add</button>
        {/* 에러표시 */}
        {toDoError !== "" ? toDoError : null}
      </form>
    </div>
  );
}
export default ToDoList;

최소 Input의 값(todo) state, onChange, onSubmit 이벤트를 필요로 함
이 코드들을 리액트 훅 폼으로 간결하게 작성할 수 있다.

🧡register

사용하기(ts)

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

//register name별로 타입 지정해줘야함 ㅡㅡ;
interface IFormInput {
  firstName: String;
  gender: GenderEnum;
}
const { register, handleSubmit } = useForm<IFormInput>();  
<form onSubmit={handleSubmit(onSubmit)}>
	<input {...register("값의 이름")} />
  ...

register에는 onChange, onBlur, ref를 갖고 있음.
console.log(register("toDo")); 콘솔찍기

{name: 'toDo', onChange: ƒ, onBlur: ƒ, ref: ƒ}
name: "toDo"
onBlur: async event => {…}
onChange: async event => {…}
ref: ref => {…}
[[Prototype]]: Object

이를 {...} 스프레드 문법으로 풀어내면 input에 name, onBlur, onChange, ref가 props로 들어감

input을 여러개 사용할 때: input 값을 담당하는 state를 하나하나 만들 필요가 없다는 장점이 있음 props로{...register("이름")}만 써주면 끝

      <input {...register("firstName")} />
      <select {...register("gender")} >

유효성 검사 기능

register은 form 유효성 검사를 쉽게 해준다.
지원되는 유효성
- required
- min
- max
- minLength
- maxLength
- pattern
- validate
예시

        <input
          {...register("email", {
    		//입력 필수
            required: true,
            pattern: {
              //pattern은 정규식을 이용. @naver.com 형식만 가능하도록 해준다.
              value: /^[A-Za-z0-9._%+-]+@naver.com$/,
              message: "네이버 이메일만 가능",
            },
          })}
          placeholder="Email"
        />

🧡handleSubmit, watch

handleSubmit

< form > 태그에 사용
handlesubmit(데이터가 유효할 때 호출되는 함수 [,유효하지 않을 때 호출되는 함수]

  const onVaild = (data: IForm) => {
    if(data.password !== data.password1) {
    // 만일 password와 password1이 일치하지 않는 경우 발생하는 에러 설정
        return setError("password1", {message: "비번이 일치하지 않습니다."},{ shouldFocus: true })
    }
  };
...
<form onSubmit={handleSubmit(onVaild)}>

watch

입력값의 변화를 볼 수 있음

🧡formState.errors로 에러메세지 보여주기

formState.error : Input의 오류를 저장함
setError : 특정한 에러를 발생시킴

  const {
    register,
    watch,
    handleSubmit,
    //formState.error를 errors로 이름 바꿔줌ㅋ
    formState: { errors },
    setError,
  } = useForm<IForm>();

  const onVaild = (data: IForm) => {
    if(data.password !== data.password1) {
    // 만일 password와 password1이 일치하지 않는 경우 발생하는 에러 설정
        return setError("password1", {message: "비번이 일치하지 않습니다."},{ shouldFocus: true })
    }
  };

Input의 기본값 설정하기 - defaultValues

  const {
    register,
    watch,
    handleSubmit,
    formState: { errors },
    setError,
  } = useForm<IForm>({
    //   input의 기본값 설정
    defaultValues: {
      email: "@naver.com",
    },
  });