React-Hook-Form을 적용시켜보자

https://react-hook-form.com/

React Hook Form - performant, flexible and extensible form library

 

React-Hook-Form 라이브러리를 사용하는 이유

• 직관적인 기능을 제공
• 패키지 크기가 작다
• 재렌더링 수를 최소화하고 유효성 검사 계산을 최소화
• 종속성이 없는 작은 라이브러리
• 직관적인 UI
• 코드의 양이 줄어든다.

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

const HeaderContent = ({
  ...
}) => {
  //react-hook-form 라이브러리에서 제공하는 hook들을 선언
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  //button이 발생시킨 submit이벤트 처리
  const onSubmit = (data) => {
    dispatch(...);
  };
  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)}>
        <>
          <InputToDo
            type="text"
            placeholder="작업을 입력해주세요"
            {...register("todoData", {
              onChange: (e) => e,
              required: true,
              minLength: 2,
              maxLength: 50,
              pattern: /^[A-Za-zㄱ-ㅎ가-힣]+$/i,
            })}
          />

          <Button type="submit">
            +
          </Button>
          {errors.todoData?.type === "minLength" && (
            <p>2글자 이상 입력해주세요</p>
          )}
          {errors.todoData?.type === "maxLength" && (
            <p>50자 이내로 입력해주세요</p>
          )}
        </>
      </form>
    </>
  );
};

export default HeaderContent;

react hook form을 적용한 코드의 모습

코드가 길어질수록 복잡성이 많이 높아지는 것을 라이브러리를 사용함으로써 해결할 수 있었습니다.

 

내가 이해한 코드 구조, 동작 방식은 form 태그 안에 input태그에 담긴 데이터들을 호완성 검사 등을 거친 다음 submit 이벤트가 발생하면 form태그의 onSubmit에 명시된 handle 함수가 동작하게 됩니다.

 

1. useForm: 라이브러리의 인스턴스를 생성합니다.
2. register: 입력 필드의 유효성 검사를 할 수 있습니다.
3. handleSubmit: submit이벤트가 발생하면 실행할 함수를 정의합니다.
4. errors: 유효성 검사에서 실패처리가 되면 에러 메시지를 생성합니다.

---

가독성을 위한 다양한 활용 방법이 있으며, controller, watch 등 react hook form의 활용 방안이 더 존재합니다. 간단하게 유효성 검사를 통해 error를 컨트롤하는 목적이시라면 본 포스팅을 참고하시고 조금 더 디테일한 활용 방안은 포스트에 올려둔 라이브러리 공식 문서를 참고하시길 바랍니다. 감사합니다.