[SeSACXCodingOn] 웹풀스택과정 14W_02 : React hook form

React hook form

React hook form은 react 기반의 폼 관리 라이브러리로, 폼 상태와 유효성 검사를 처리하기 위한 간편한 방법을 제공하고 있습니다. 이를통한 폼 컴포넌트의 개발과 유지 보수를 용이하게 할 수 있습니다.

React hook form 을 사용하면 폼 컴포넌트의 상태 및 유효성검사를 관리하는데 필요한 코드의 양을 대폭 줄일 수 있습니다. 폼 요소의 값이나 상태변경에 대한 이벤트를 관리하기 위해 명시적인 이벤트 핸들러를 작성할 필요 없이 단순히 hook (useForm)을 사용하여 관련 데이터를 추적하고 업데이트 할 수 있습니다.

Register

입력 요소에 연결하기 위한 함수로 이 함수를 통해 입력 요소에 유효성 검사 규칙을 설정합니다.

handleSubmit

폼의 제출을 처리하기 위한 함수로 이 함수에 전달된 콜백은 유효성 검사를 통과한 데이터를 인자로 받아 실행합니다.

watch

특정 폼 필드의 값을 실시간으로 관찰하는 함수입니다.

formState

폼의 상태를 나타내는 객체로 errors나 isValid등의 상태를 포함합니다.

react-hook-form 사용하기

react-hook-form을 사용하려면 먼저 ‘$npm install react-hook-form’명령어로 설치를 해줍니다.

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

export default function Form() {
  const {
    register, //input 할당, value 변경 감지
    handleSubmit, //form submit 시 호출
    formState: { errors }, //폼 상태 객체
    watch, //특정 폼 필드의 값을 실시간으로 사용
  } = useForm();
  //handleSubmit(funcA[,funB]): 두개의 함수를 받음
  // -funcA:필수, 유효할 때 실행
  // -funcB:선택, 유효하지 않을 때 실행
  const onValid = (data) => {
    console.log('onValid', data); //onValid {username: '홍', email: 'minyung1240@daum.net'}
  };

  const onInValid = (err) => {
    console.log('onInValid', err);
  };

  console.log('errors', errors);
  console.log('watch', watch('username'));
  return (
    <div>
      <h1>react-hook-form 라이브러리 데모</h1>
      <form onSubmit={handleSubmit(onValid, onInValid)}>
        <input
          type="text"
          placeholder="username"
          {...register('username', {
            required: '이름을 입력해주세요',
            minLength: {
              message: '이름은 최소 2글자 이상 작성해주세요',
              value: 2,
            },
          })}
        />
        {errors.username?.message}
        <br />
        <input
          type="email"
          placeholder="email (gmail)"
          {...register('email', {
            required: '이메일을 입력해주세요',
            validate: {
              useGmail: (v) =>
                v.includes('gmail.com') || 'gmail로만 가입 가능합니다',
            },
          })}
        />
        {errors.email?.message}
        <br />
        <input type="text" placeholder="password" {...register('password')} />
        <br />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

먼저 예제코드 상단에서 react-hook-form 라이브러리에서 useForm 함수를 가져옵니다.

컴포넌트 내에서 ‘useForm’훅을 호출하여 폼과 관련된 기능을 초기화 합니다.

• register: 폼 입력과 폼 상태를 연결하는 데 사용되며 입력 필드의 값을 추적하고 변경사항을 감지할 수 있습니다.
• handleSubmit: 폼이 유효할 때 실행할 함수 또는 유효하지 않을 때 실행할 함수를 받는 함수입니다.
• formState: 폼의 상태를 보유하는 객체로, 유효성 검사 오류를 포함합니다.
• watch: 이 함수를 사용하여 특정 폼 필드의 값을 실시간으로 확인할 수 있습니다.

이벤트핸들러로 onValid 와 onInValid 두 함수를 정의합니다. onValid함수는 폼이 유효할때 호출되며 onInValid함수는 폼이 유효하지 않을 때 호출됩니다.

폼에는 ‘username’, ‘email’, ‘password’ 세 가지의 입력 필드가 포함되어 있습니다. 이러한 필드는 register 함수를 사용하여 폼과 연결됩니다. 각 필드에는 필수 필드 및 사용자 이름의 최소 길이에 대한 유효성 검사 규칙과 이메일 필드의 사용자 정의 검증 (이메일이 gmail 주소인지 확인)이 제공됩니다.

각 입력 필드 아래에서 유효성 검사 오류를 확인하고 오류 메시지가 있다면 해당 메시지를 표시합니다.

{errors.username?.message}는 사용자 이름 필드의 오류 메시지를 표시합니다

validation 조건은 register 함수의 두번째 인자로 들어가며, 기본적으로 사용할 수 있는 조건들은 아래와 같습니다.

• required (필수 여부)
• min (최소 값)
• max (최대 값)
• minLength (최소 길이)
• maxLength (최대 길이)
• pattern (정규 표현식)
• validate (custom validation 함수)

 

---

+회고

react-hook-form 을 알기전 난,, 폼 유효성검사는 유효성 검사를 하는 함수에 입력 필드 마다 조건식을 걸어서 코드가 so long..,,, 했었지만,, 이젠 달르아아앗!!!! 코드가 훨씬 간결해졌다. 정규식이나 유효성에 통과하지 못해서 통과하지 못한 message를 보여주는 것도 훨씬 간단하고 간결하게 쓸 수 있게 되었다. 역시,, 간결하고 가독성이 있는 코드,, 좋은 코드 ,, 유지보수에도 좋을것 같다.. 물론 잘 사용한다면말이지 ,,,