🌱 React Hook Form

React를 사용해 개발을 하다보면 다양한 input 요소를 사용해 form을 다루게 됩니다.
이 때 React에서 form을 다루는 전통적인 방식은 몇 가지 문제점을 가지고 있습니다.

👾 React에서 form을 다루는 전통적인 방식(문제점)

• React에서는 상태(State)를 이용해 사용자가 입력하는 값을 관리하는 방식을 사용합니다. 입력값과 react 상태가 항상 동기화되도록 보장하지만, 사용자가 입력할 때마다 상태를 업데이트하고 컴포넌트를 리렌더링합니다. form에 input 필드가 많거나 빈번한 상태 업데이트가 일어나면 성능 저하를 유발합니다.
• 모든 form 필드의 상태를 수동으로 관리해야 합니다. 따라서 상태를 관리하는 로직이 복잡해질 수 있습니다. 특히, 동적인 form 필드를 다룰 때 코드의 복잡성이 매우 증가합니다.
• 각 input 필드마다 onChange 핸들러를 설정하고, 핸들러 내에서 상태를 업데이트하는 로직을 반복적으로 작성하게 되면서 코드의 중복이 발생합니다. form이 커질 수록 더 많은 코드를 작성해야 합니다.
• form의 각 input 필드의 유효성 검사 로직을 직접 설정하고, 에러 메시지를 관리하는 로직을 추가적으로 작성해야 합니다. 복잡한 form에서는 로직이 상당히 복잡해지고 코드의 가독성과 유지보수성을 저해합니다.
• form을 제출(submit)할 때, 각 input의 상태를 모아서 처리해야하고, 유효성 검사를 수행한 후에야 submit 로직을 실행할 수 있습니다. 따라서 유효성 검사를 통과하지 못한 경우의 로직까지 구현해야 합니다.

---

💧 전통적 form 예시

import { useState } from 'react';
function Form() {
  // 👉🏻 모든 필드의 상태를 useState로 선언해야 한다.
  const [ email, setEmail ] = useState('');
  const [ password, setPassword ] = useState('');
  const [ errors, setErrors ] = useState({});
  const validateForm = () => {
  	let valid = true;
    let errors = {};
    // 👉🏻 각 필드의 유효성 검사 및 이벤트 핸들러를 하나 하나 로직을 만들어야 한다.
    if(!email) {
      errors.email = '이메일은 필수로 입력하는 요소입니다.';
      valid = false;
    }
    //...
    return valid;
  }
  //...
  return (
    <form onSubmit={handleSubmit}>
      <input
        name='email'
        value='email'
        onChange={(e) => setEmail(e.target.value)}
      />
      {errors.email && <p>{errors.email}</p>}
      ...
    </form>
  );
}

이러한 문제들을 해결하고 form을 더 쉽게 관리할 수 있도록 해주는 라이브러리가 React-Hook-Form입니다. React Hooks를 기반으로 성능 최적화와 개발 편의성을 모두 고려해 설계된 라이브러리로 2024년 기준으로 React 생태계에서 인기를 얻고 있습니다.

React-Hook-Form을 사용하면 불필요한 업데이트와 리렌더링을 최소화하고 상태관리와 유효성 검사 로직을 더 간결하고 효율적으로 작성할 수 있습니다.

또한 타입스크립트를 지원하여 form의 타입 안정성을 보장합니다. 이는 개발시 오류를 줄이고 코드 품질을 향상시킵니다.

---

☀️ 설치하기

$ npm i react-hook-form
# 혹은
$ yarn add react-hook-form

터미널이나 커맨드라인을 통해 프로젝트에 라이브러리를 설치합니다.

☀️ 특징

🌿 1. 비제어 컴포넌트 (Uncontrolled Components)

React의 상태(State)를 사용하지 않고, DOM 자체를 통해 직접적이고 자동적으로 입력 값을 저장하고 관리하는 것을 비제어 컴포넌트를 사용해 상태를 관리한다고 합니다. (일반적으로 React는 제어 컴포넌트를 사용합니다.)

즉, 사용자가 값을 입력하면 입력된 데이터는 자동으로 input, select, textarea등 요소의 현재값으로 설정되어 브라우저 내부에 저장됩니다. 이러한 동작이 React나 JS라이브러리/프레임워크 없이 순수HTML과 브라우저만으로 동작합니다. 따라서 웹 브라우저의 환경에서 사용되고, SSR이나 네이티브 앱 등의 다른 환경에서는 직접적으로 적용되지 않습니다.

자바스크립트나 React 상태 관리 시스템을 우회하여 언제든지 DOM으로 직접 값을 조회할 수 있어, 입력시마다 상태를 업데이트하거나 리렌더링 하지 않아 불필요한 리렌더링을 줄여 성능을 향상시킵니다. 또, 상태를 직접 관리하지 않아도 되어 코드가 간결해지고 처리 로직이 단순해집니다.

🌿 2. Form data 관리(useForm)

상태관리, submit, 입력값 감시, 에러메시지 처리 등의 다양한 작업을 useForm() 훅을 통해 간결하게 처리할 수 있어 효율적으로 구현하고 데이터를 관리할 수 있습니다.

💧 React-Hook-Form Example

useForm 훅을 사용하면 useState로 상태를 관리할 필요가 없고, onChange핸들러를 구현할 필요도 없습니다. 유효성 검사 규칙을 쉽게 적용할 수 있고, 에러메시지를 자동으로 처리할 수 있습니다.

• 다음은 useForm훅을 사용해 만든 간단한 form 예시입니다. (vs. React 전통적 form 예시의 코드 와 비교해 많이 간소졌음에 주목해주세요😎)

// 👉🏻 우선 useForm 훅을 import 합니다.
import { useForm } from 'react-hook-form';
function Form() {
  // 👉🏻 useForm 훅에서 여러 함수를 구조분해할당 합니다.
  const { register, handleSubmit, watch, formState: {errors} } = useForm();
  // submit 시 처리할 동작을 정합니다. (handleSubmit() 함수에 인자로 들어갈 콜백함수)
  // onSubmit()은 유효성 검사를 통과한 경우 실행되고, onError()는 실패한 경우 실행될 동작입니다.
  const onSubmit = data => console.log(data);
  const onError = errors => console.error(errors);
  return (
    // 👉🏻 onSubmit event handler에 handleSubmit()함수에 onSubmit, onError 콜백함수를 넣어 등록합니다.
    <form onSubmit={handleSubmit(onSubmit, onError)}>
      {/* 👉🏻 form field 등록 : register() 함수를 사용해 이름과 유효성검사를 전달 */}
      <input {...register('email', {required: 'email is required'}) } />
      {/* 👉🏻 form field의 유효성 검사 에러가 있다면 확인해 에러메시지 표시하는 조건부 렌더링 */}
      {errors.email && <p>{errors.email.message}</p>}
      <input {...register('password', {required: 'password is required'}) } />
      {errors.password && <p>{errors.password.message}</p>}
      <button type='submit'>제출</button>
    </form>
  );
}

• useForm()의 모든 속성을 확인하려면 여기에서 확인하세요 😀

🌳 form field 등록

register()함수를 통해 form의 필드(input, select 등)를 React-Hook-Form에 등록합니다. 이를 통해 React-Hook-Form이 해당 필드의 값 변화를 감지하고, 유효성 검사를 실행할 수 있도록 합니다.

// 👉🏻 useForm hook에서 register 함수를 가져온다.
const { register } = useForm();

return (
  //👉🏻 form 내에서 사용하는 입력 필드를 register 함수로 등록한다.
	<input {...register('field_name', { required: true })} />
  );

• 첫번째 인자로 field_name을 적어 등록하고, 두번째 인자로 유효성 검사에 사용할 규칙 객체를 전달합니다.

🌳 Submit 처리

useForm()훅에서는 handleSubmit()함수를 제공하고 있습니다. 이 함수는 제출(submit) 이벤트 발생시 formData를 인자로 받아 실행될 두 개의 콜백함수를 받습니다. 하나는 내부적으로 유효성 검사를 통과한 경우에 호출할 함수(onSubmit)로 실제 데이터 처리 로직을 수행하고, 하나는 실패할 경우 호출할 함수(onError)입니다.

 // 👉🏻 useForm 훅에서 handleSubmit 함수를 가져옵니다.
  const { handleSubmit } = useForm();
  const onSubmit = data => console.log(data);
  const onError = errors => console.error(errors);

  return (
    // 👉🏻 onSubmit 콜백함수를 handleSubmit함수의 인자로 넣어 onSubmit 이벤트에 등록합니다.
    <form onSubmit={handleSubmit(onSubmit, onError)}>
      {/*Form Field */}
    </form>
  )
}

🌳 에러 메시지 표시

errors 객체는 form 필드의 유효성 검사 에러를 저장하고 있습니다. 훅을 통해 각 필드에 대한 에러를 확인하고 조건부 렌더링으로 에러 메시지를 사용자에게 표시할 수 있습니다.

//👉🏻 유효성 검사 실패의 구체적인 이유를 담은 객체
const { errors } = useForm();
return (
  ...
  {errors.field_name && <p>{errors.field_name.message}</p>}
  ...
 );

🌳 입력 값(data) 감시

watch() 함수를 통해 특정 입력란의 값이나, form 전체의 입력 값의 변화를 실시간으로 감시할 수 있습니다. 감시하고자 하는 필드 이름을 인자로 받고, 해당 필드의 현재 값을 반환합니다.

watch()를 통해 form의 특정 부분을 조건부로 렌더링하거나, 입력 값에 따라 추가적인 로직을 수행해야 할 때 유용하게 사용할 수 있습니다.

function Form() {
  const { watch } = useForm();
  const fieldValue = watch('field_name'); // 👉🏻 특정 필드의 값을 감시해 현재 값을 fieldValue에 저장
  // 👉🏻 fieldValue 값을 사용해 다양한 로직 수행 가능!
}

🌳 Options

• mode : mode 옵션으로 유효성 검사가 실행될 타이밍을 설정할 수 있습니다.
  • onChange(default, 필드 값이 변경될 때마다 유효성을 재검사)
  • onBlur(포커스를 잃었을 때 유효성 재검사)
  • onSubmit(제출시에만 유효성을 재검사) 등이 있습니다.

const { register, handleSubtmi, watch, errors } = useForm({ mode: 'onSubmit' });

• defaultValues : form 필드가 렌더링될 때 각 필드에 적용될 초기값을 설정할 수 있습니다.

const { register, handleSubtmi, watch, errors } = useForm({ defaultValues: {name: 'newha'} });

• reValidateMode : 유효성 검사에서 에러가 발생한 경우, 다시 검사할 조건을 설정할 수 있습니다.

const { register, handleSubtmi, watch, errors } = useForm({ reValidateMode: 'onSubmit' });

• resolver : Yup, Joi, Superstruct 와같은 외부 검증 스키마 라이브러리와의 통합을 지원합니다. resolver 함수를 정의하고, 함수 내에서 외부 라이브러리의 유효성 검사 로직을 실행한 후, 결과를 반복해 복잡한 검증 로직을 보다 선언적으로 관통합해 사용할 수 있습니다. yupResolver과 같은 resolver가 있습니다.

🌿 3. Form Validation (폼 검증)

사용자가 입력란에 올바른 데이터를 썼는지(유효성 검사) 쉽게 확인할 수 있는 방법을 제공합니다.

필요한 data 형식과 사용자가 입력한 data 형식이 같은지 확인하여 데이터의 정확성을 보장하고, 사용자에게 유효한 형식을 알려주어 더 나은 사용자 경험을 제공하는 검사를 유효성 검사라고 합니다.

예를 들어 '이메일 주소가 올바른 형식인가?', '비밀번호가 충분히 안전한가?' 같은 유효성을 쉽고 효과적으로 검증할 수 있습니다.

🌳 기본 검증 규칙

간단한 검증 규칙은 register() 함수에 객체 형태로 전달하여, 특정 입력란에 대한 검증 로직을 구현할 수 있습니다.

// 앞으로 설명에서의 예시 코드가 {검증규칙} 부분에 들어가게 됩니다.
<input ref={register({/* 👉🏻검증 규칙!!!!!👈🏻 */})} />

• required : 필수로 입력되어야 하는 필드임을 나타내고, 사용자는 해당 필드를 비워 제출할 수 었습니다. {required: true} 혹은 {required: '필수로 입력해야 합니다.'}와 같이 에러메시지를 포함해 적을 수 있습니다.

• minLength / maxLength : 문자열이나 배열의 길이에 적용해 입력값의 최소 길이와 최대 길이를 지정합니다. {minLength: 6}(최소 6글자 이상)과 같이 적을 수 있습니다.

• min / max : 숫자 입력 필드에서 최소값과 최대값을 지정하여 값의 범위를 제한할 수 있습니다. {min: 1, max: 5}(최소 1이상, 최대 5이하)와 같이 사이의 입력값을 요구할 수 있습니다.

• pattern : 입력값이 특정 패턴(정규표현식)과 일치하도록 할 수 있습니다. 이메일 주소, 전화번호 등 처럼 특정 형식을 갖춘 문자열을 검사할 수 있습니다. {pattern: /^[A-Za-z]+$/}(알파벳만 인정)처럼 특정 형식을 요구할 수 있습니다.

🌳 조건부 검증 규칙

특정 조건에 따라 form field를 다르게 검증해야 할 경우, 유연하게 조건부로 커스텀 검증 규칙을 구현할 수 있습니다. 예를 들어, 비밀번호 확인란과 같이 두 입력란의 값이 일치하는 지 확인하는 등의 작업에서 사용할 수 있습니다.

• validate : 입력란의 이름을 키(Key)로 하고, 그 값으로 ture/false로 확인되는 검증 함수를 가집니다. 검증 함수는 입력값을 받아 유효성을 검사하고, 유효하지 않을 경우 return값으로 문자열을 주면 오류 메시지를 반환합니다.

const { register, handleSubmit, watch, errors } = useForm({
  // 입력란에 대한 유효성 검사를 정의할 수 있습니다.
  validate: {
    confirmPassword: value => {
      const password = watch('password'); // 👉🏻 비밀번호 입력란의 값을 가져오기
      if(value !== password) {
        return "비밀번호와 일치하지 않습니다.";
      }
      return ture;  // 👉🏻 유효성 검사 통과
    }
  }
});

---

☀️ 프로젝트 사용례

• 회원가입 페이지에서 사용한 예시입니다.

import { FormProvider, useForm, SubmitHandler } from 'react-hook-form'

export default function SignUpPage() {
  const Form = FormProvider;
  const form = useForm();
  
  const onSubmitSignUp = async (formData) => {
    // supabase에 가입요청하는 함수에 입력받은 formData를 넘기는 onSubmit 함수
    await signUpEmail(formData); 
  };
  
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmitSignUp)}>
        <input type="text" 
          	   name="email" 
          	   options={{	// 👉🏻 options에 규칙"객체"를 전달해야합니다.
            	required: "필수항목입니다.",  // 👉🏻 필수입력란이라는 조건
                pattern: {  // 👉🏻 pattern으로 이메일 형식을 검사하는 "정규표현식"과 에러메시지를 전달
                  value: /^([a-z0-9_.-]+)@([\da-z.-]+)\.([a-z.]{2,6})$/,
                  message: "이메일 형식으로 입력해주세요.",
                },	
               }}
          	   placeholder="이메일 주소를 입력하세요."
        />
        <span>{form.formState.errors[email]?.message}</span>  // 👉🏻 에러가 있다면 메시지를 띄움
        <input type="password"
          	   name="password"
          	   options={{
            	required: "비밀번호를 입력해주세요.",
                minLength: {  // 👉🏻 최소 길이 검증 & 에러메시지
                  value: 8,
                  message: "영문, 숫자, 특수기호를 포함하여 8자리 이상 입력해주세요.",
                },
                pattern: {
                  value: /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,15}$/,
                  message:
                    '영문, 숫자, 특수기호를 포함하여 8자리 이상 입력해주세요.',
                },
               }}
          	   placeholder="비밀번호를 입력해주세요"
        />
        <span>{form.formState.errors[password]?.message}</span>
        <input type="password"
          	   name="ConfirmPassword"
          	   options={{
            	required: "비밀번호를 확인해주세요.",
                validate: {	  // 👉🏻 validate로 함수로 여러 검증조건 작성 가능(True/False 판단)
                  confirmPassword: (value) => {  // 👉🏻 비밀번호란과 비밀번호 확인란의 입력값이 같은 지 확인하는 함수
                    const { password } = form.getValues();
                    return (  // 👉🏻 return 값이 문자열이면 에러메시지로 리턴한다.
                      password === value || "비밀번호가 일치하지 않습니다."
                    );	
                  },
                },
               }}
          	   placeholder="비밀번호를 확인해주세요"
        />
        <span>{form.formState.errors[confirmPassword]?.message}</span>
      </form>
    </Form>
  );
}

---

👀 Reference

• React-Hook-Form 공식문서