React-Hook-Form을 사용할 것인가, 말것인가

[guesung]

현재, 회원가입의 페이지에서는 React-Hook-Form라이브러리를 이용하여 간편하게 input값을 관리하고 있습니다.
이 input값 관리를 꼭 React-Hook-Form 라이브러리를 이용하여야 하는지 의문이 들어 제기해보았습니다.

<AuthInput
                text="인증번호"
                register={register('certificateNumber', {
                  required: true,
                  pattern: {
                    value: regexr.certificateNumber,
                    message: '인증 번호를 다시 확인해주세요.',
                  },
                })}
                maxLength={6}
                type="number"
              />

매 번 onChange 함수와 type설정을 줄이기 위해 useInput 훅을 만들어보았습니다.

import { useState } from 'react';

export type InputType = {
  value: string;
  onChange: ({ target }: { target: HTMLInputElement | HTMLTextAreaElement }) => void;
  setValue: React.Dispatch<React.SetStateAction<string>>;
};

const useInput = (defaultValue: string, filter?: (text: string) => string): InputType => {
  const [value, setValue] = useState(filter ? filter(defaultValue) : defaultValue);

  const onChange = ({ target }: { target: HTMLInputElement | HTMLTextAreaElement }) => {
    const { value } = target;
    setValue(filter ? filter(target.value) : value);
  };

  return { value, onChange, setValue };
};

export default useInput;

초기값을 인자로 넘겨주면 value, onChange, setValue 값을 반환합니다.

[guesung]

react-hook-form을 사용할 떄와 사용하지 않을 때의 코드 수를 비교해보았다.

  const setSexValue = (value: string) => {
    setInputValue((prev) => ({
      ...prev,
      sex: value,
    }));
  };

  const setSexValue = (value: string) => {
    setValue('sex', value);
  };

단순히 값을 설정하는 함수인데도 이렇게 명확한 차이가 보인다. useState로 각 input을 관리할 경우, 코드가 길어지고, 이는 유지보수성 측면에서 상당히 좋지 않다. 코드는 더욱 길어지고, 코드를 읽기 어려워지게 된다.

[guesung]

react-hook-form 위처럼 코드 가독성과 유지보수성을 좋게 해줄 뿐 아니라 다양한 장점이 있다.

1. 비제어 컴포넌트의 장점은 그대로 살리면서 제어 컴포넌트에서만 다룰 수 있는 기능들을 제공해줌
   • 리렌더링을 최소화시켜 마운팅 속도를 높여줌

• useState를 사용할 경우 타이핑할 때마다 리렌더링이 일어났겠지만, react-hook-form을 사용할 경우 비제어 컴포넌트처럼 동작함

3. 실시간 유효성 검사
4. 실시간 동기화
5. 친절한 공식문서
6. 지속적인 업데이트
7. 타입스크립트를 기본으로 함
8. 패키지 크기가 작음. super light

[guesung]

이렇게 좋은 라이브러리를 안쓸 이유가 없다고 생각하여, 사용하는 것으로 결론을 내린다 👏👏