[REACT] react-hook-form 사용하기 - 개념(1)

1. React Hook Form 소개

---

공식문서 링크 : https://react-hook-form.com/

React Hook Form은 React 내에서 From을 쉽게 제어하고 손쉽게 유효성 검사를 처리하도록 도와주는 라이브러리입니다.다른 종속성이 없는 최소한의 라이브러리로 구성되어 있어 성능이 뛰어나고 사용이 간편합니다. 

 

[React 기본 입력 필드 처리]

import React, { useState } from "react";

export default function App() {
  const [state, setState] = useState({
    email: "",
    password: ""
  });

  const handleInputChange = (event) => {
    setState((prevProps) => ({
      ...prevProps,
      [event.target.name]: event.target.value
    }));
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(state);
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
         <input
            type="text"
            name="email"
            value={state.email}
            onChange={handleInputChange}
          />
        <input
            type="password"
            name="password"
            value={state.password}
            onChange={handleInputChange}
          />
        <button type="submit">Login</button>
      </form>
    </div>
  );
}

 

React로 입력 필드들을 처리할 때의 순서입니다.

  1. 입력 필드에 대한 데이터 state 선언

  2. 입력 필드에 onChange 이벤트 등록해 state 변경

  3. state를 입력 필드의 value로 등록

기존에 입력 필드들을 처리할 때면 state를 선언하고 각 입력 필드에 event를 연결해 value를 받아오는 과정을 거쳐야 합니다. 이런 입력 필드가 많은 회원가입, 설문조사 등 입력 필드가 많아 질 수록 제어하기 힘들어지고 유효성 검사를 처리하기 어려워집니다.

[React Hook Form 적용]

React Hook Form을 사용하게 되면

  - value와 onChange로 각 입력 필드에 대한 처리를 추가할 필요없음

  - state를 직접 관리할 필요가 없음

아래와 같이 코드를 줄일 수 있습니다.

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

export default function App() {
  const { register, handleSubmit, errors } = useForm();

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

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        <input type="text" name="email" ref={register} />
        <input type="password" name="password" ref={register} />
        <button type="submit">Login</button>
      </form>
    </div>
  );

2. React Hook Form 사용

---

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

React Hook Form은 form 작업에 사용할 수 있는 useForm hook을 제공합니다. hook은 초기값 설정, 입력 필드 지우기 기능 등을 제공하지만, 제일 중요한 세 가지만 살펴보겠습니다.

[register]

ref로 사용되는 함수로 입력 필드를 React Hook Form에 등록하고 변경 사항에 대해 값을 추적합니다.

<input type="text" name="email" ref={register} />

주의할 점은 입력 필드에는 name 속성이 있어야 하며 해당 값은 고유해야 합니다.

[handleSubmit]

form을 서버로 제출할 때 사용하는 함수입니다.

<form onSubmit={handleSubmit(onSubmit)}>

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

[errors]

유효성 검사를 포함하는 객체입니다.

<input type="text" name="email" ref={register({ required: true})} />
<input
  type="password"
  name="password"
  ref={register({ required: true, minLength: 6 })}
/>

3. validation 기본 구현

---

validation를 추가하기 위해서는 각 입력 필드 ref로 전달되는 레지스터 함수에 유효성 검사를 매개변수를 전달합니다.

<input type="text" name="email" ref={register({ required: true})} />
<input
  type="password"
  name="password"
  ref={register({ required: true, minLength: 6 })}
/>

자주 사용되는 유효성 검사 속성들 입니다.

  - required : 입력 필드에 대한 필수 여부 검사

  - minlength maxlength : 문자열 입력 값의 최소, 최대 길이 설정

  - min max : 숫자 입력 값의 최소값, 최대값 설정

  - type : 입력 필드에 대한 유형 (이메일, 숫자, 텍스트 등)

  - pattern : 정규식을 이용한 입력 필드에 대한 패턴 정의

 

이렇게 정의된 속성들에 따라 form이 제출될 때 errors 로 유효성 검사 성공여부를 확인 할 수 있습니다.

<input
  type="text"
  name="email"
  ref={register({
    required: 'Email is required.',
    pattern: {
      value: /^[^@ ]+@[^@ ]+\.[^@ .]{2,}$/,
      message: 'Email is not valid.'
    }
  })}
/>

{errors.email && errors.email.type === "required" && (
  <p className="errorMsg">Email is required.</p>
)}

[validation 검사]

기본적으로 유효성 검사는 handleSubmit 함수가 실행 될 때 진행됩니다. 유효성 검사가 실패하면 React Hook Form은 다음과 같이 처리합니다.

  - 해당 입력 필드에 자동으로 focus 처리

  - errors가 하나라도 존재할 경우 submit 함수 미처리(form 제출을 안함)

 

submit 버튼을 눌렀을 때 말고, 입력과 동시에 입력 필드의 유효성 검사를 진행하려면 사용자 정의 validation를 만들어 사용하면 됩니다.

4. 사용자 정의 validation

---

const validatePassword = (value) => {
  if (value.length < 6) {
    return '6자리보다 적게 입력해주세요.';
  }
  return true;
};

<input
  type="password"
  name="password"
  ref={register({
    required: '비밀번호는 필수값입니다.',
    validate: validatePassword
  })}
/>

validate 함수를 추가하여 입력 필드에 대한 사용자 지정 유효성 검사를 제공할 수도 있습니다.