React Hook Form

오늘의 주제는 react hook form에 대해서 공부해 봤다

 

내가 프로젝트를 하는데 폼 작성하는 기능이 주를 이루는 프로젝트라

이번기회에 react hook form을 사용하자고 결정하고 자세하게 배워봤다

---

React Hook Form

Performant, flexible and extensible forms with easy-to-use validation.
유효성 검사를 쉽게 할 수 있는, 성능이 우수하고 유연하며 확장 가능한 form을 제공하는 라이브러리이다.

 

npm install react-hook-form

 

react hook form은 React에서 폼을 쉽게 다룰 수 있도록 도와주는 라이브러리이다

 

여기서 폼이란 html태그중 하나인 form을 의미하는 것으로

html에서 사용자가 값을 입력하고 제출할 수 있게 하는 태그다

 

주로 로그인, 회원가입등에 사용된다

기존의 React에서의 방법

원래 React에서 로그인, 회원가입을 구현하려면 아래와 같은 작업을 거친다

 

아이디, 비밀번호 같은 요소들을 useState를 사용해 업데이트하고, onChange로 동기화하는 작업을 거친다

 

그 후 우리가 원하는 형식인지 확인하는 절차를 거친다

if (!email.includes("@gmail.com")) return (<p>이메일 형식이 올바르지 않습니다.</p>;
if (password.length < 6) return (<p>비밀번호는 6자 이상이어야 합니다.</p>;

 

요구하는 형식이 올바르면 서버에 요청을 보내고 로그인, 회원가입을 할 수 있었다

 

방법이야 간단 방법이지만 

코드상으로는 길고 또 비효율적인 부분이 있다

 

먼저 useState랑 onChange로 상태를 동기화하는데

 

useState에서 상태가 업데이트가 되면 재렌더링이 되기 때문에 불필요한 렌더링이 발생한다

 

그리고 유효성 검사를 직접 일일이 구현해야 하기 때문에

코드가 조금 더 길어지게 되고, 복잡해진다

 

애초에 React를 사용할 때는 form보다는 그냥 useState로 상태관리해서 자체적으로 구현하는 경우가 많다

 

그러면 왜 React hook form이란 라이브러리를 도입해서 사용하는 걸까?

왜?

일단 form태그를 사용했을 때 장점이 있다

 

기본적인 enter키로 자동제출기능 같은 작은 내용부터

 

form 태그는 웹 표준을 따르므로 접근성 개선 효과와,

 

<input>, <select>, <textarea> 등의 폼 요소를 자연스럽게 그룹화해서

입력값이 많을 경우 일일이 useState를 사용하는 경우를 방지할 수 있다는 이점이 있다

 

그 외에도 react hook form만의 추가적인 기능도 제공된다

register 기반의 자동 관리

register 함수로 input이나 textarea를 등록하면 useState를 사용하지 않아도

자동으로 값을 동기화한다

const { register, handleSubmit } = useForm();

<form onSubmit={handleSubmit(onSubmit)}>
  <input {...register("username")} />
</form>

 

 

더불어 내부적으로 useRef를 사용하기 때문에 불필요한 재렌더링을 방지할 수 있다

 

검색 내장화

react hook form은 기본적인 검증 방법을 제공합니다

 

필수값(required)

입력 필드를 필수로 설정할 수 있다

<input {...register("username", { required: "사용자 이름은 필수입력입니다." })} />
<input {...register("password", { required: "비밀번호는 필수입력입니다" })} />

 

최소&최대길이(minLength, maxLength)

입력값의 최소, 최대길이 지정할 수 있다

<input
    {...register('password', {
      minLength: {
        value: 8,
        message: '비밀번호는 최소 8자 이상이어야 합니다.',
      },
      maxLength: {
      	value: 16,
        message: '비밀번호는 최대 16자입니다',
      }
    })}
  />;

패턴검사(pattern)

정규식을 사용해서 입력값의 형식을 검사할 수 있다

email 형식이나 전화번호 형식 등

<input
  placeholder="이메일을 입력해주세요"
  {...register('email', {
    required: '이메일을 입력해주세요.',
    pattern: {
      value: /^[a-zA-Z0-9._%+-]+@gsm\.hs\.kr$/,
      message: '학교 이메일(@gsm.hs.kr)만 사용 가능합니다.',
    },
  })}
/>

 

<input
  {...register('phone', {
    required: '전화번호는 필수입력란 입니다',
    pattern: {
      value: /^010-\d{4}-\d{4}$/,
      message: '올바른 전화번호 형식(010-XXXX-XXXX)으로 입력하세요.',
    },
  })}
/>;

 

비동기 중복 검사 

vaildate는 특정 조건을 만족할 때 실행되는 옵션이지만 

이를 이용해 id중복이나 이미 사용된 email, 멀리는 회원가입 시 인증코드까지 검사할 수 있다

const checkEmail = async (email: string) => {
  const response = await fetch(`대충 검사 url=${email}`);
  const data = await response.json();
  return data.available || "이미 사용 중인 이메일입니다.";
};

<input {...register("email", { validate: checkEmail })} />

 

위코드는 사용 중인 email을 표시하는 예제코드다

---

결론

원래 존재했었다 정도만 알고있었지만

막상 사용하려고 공부를 해보니 더욱 다양한 기능이 있다는 사실을 알아서 좋았다