처음부터 끝까지 직접 구현하는게 최고다. 라는 생각을 버리게 해준 React Hook Form

들어가기 전에

"직접 구현하는게 최고지" 라는 마인드로 코드를 작성하는 나는 매번 양식들을 직접 다 구현했었다. 그러다 보니, 코드 작성 시간은 물론이고 가독성은 현저히 떨어지며 리팩토링을 위한 분석 시간이 너무 오래 걸려 지루하고, 비효율적인 코드를 생산해내는 것만 같아서 이번 해커톤에서는 더 효율적인이고, 더 편리하게 회원가입 양식을 만들 수 있도록 도와주는 라이브러리는 없을까 하고 찾아보다가 React Hook Form을 접하게 되었다.

Performant, flexible and extensible forms with easy-to-use validation.
React Hook Form 공식 홈페이지의 메인 문구

이 문장을 보고 과거에 작성했던 코드를 되돌아 보는 시간을 잠깐 가지게 되었는데, 기존에 프로젝트에서 만들었던 양식들의 경우 최대한 성능을 끌어올리기 위해 useCallback, React.memo도 사용해보고 컴포넌트들을 분리도 해보고 했었다. 하지만 매번 성능만을 고려해서 였을까? 코드가 늘 깔끔하지 않았고 확장이 항상 버거웠다. 즉, 유연성, 확장 가능성에 대해서는 전혀 고려하지 않았던 것이였다.

그렇다면, React Hook Form을 알고나서 어떻게 적용하였으며 어떠한 변화가 있었는지 알아보자.

React Hook Form

1. 가독성

React Hook Form을 이용하여 작성한 로그인 양식을 살펴보자.

const SignInForm = () => {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm();

  const onSubmit = (authForm) => console.log(authForm);

  return (
    <section>
      <form
        method="post"
        className="signin-form"
        onSubmit={handleSubmit(onSubmit)}
      >
        <div className="input-container">
          <label htmlFor="inputId" className="input-type">
            아이디
          </label>
          <input
            id="inputId"
            type="text"
            placeholder="아이디 입력"
            {...register("id", {
              required: "아이디를 입력해주세요.",
            })}
          />
        </div>
        <div className="input-container">
          <label htmlFor="inputPassword" className="input-type">
            비밀번호
          </label>
          <input
            id="inputPassword"
            type="password"
            placeholder="비밀번호 입력"
            {...register("password", {
              required: "비밀번호를 입력해주세요.",
            })}
          />
        </div>
        <button className="submit-button" type="submit" disabled={isSubmitting}>
          로그인
        </button>
        <div className="error-container">
          <p>
            <ErrorMessage errors={errors} name={Object.keys(errors)[0]} />
          </p>
        </div>
      </form>
    </section>
  );
};

만약 직접 구현했다면, SignInForm 컴포넌트 내부에서는 수많은 코드가 작성되어야 했을텐데, 지금은 어떤가? 코드가 간결하게 작성되어 가독성이 눈에 띄게 향상된 것을 확인할 수 있게 되었다.

뿐만 아니라, 에러메시지 또한 @hookform/error-message 에서 제공해주는 ErrorMessage 컴포넌트를 이용하여 화면에 표시할 수 있으니 이전과 비교하여 생산성이 엄청나게 높아졌다.

그렇다면 유연성과 확장성은 어떨까?

2. 유연성과 확장성

만약, 위 코드에서 로그인할 때 아이디를 무조건 4자 이상은 입력받도록 요구한다고 생각해보자. 어떻게 해야할까?

<input
	...
    {...register("id", {
    	required: "아이디를 입력해주세요.",
        minLength: 4
    })}
/>

minLength를 설정해줌으로써, 요구사항을 충족하였다. 끝이다. 정말로 대단하다. 하지만 4자 이상은 사실 너무 쉬운 요구이고 다음과 같이 말할 수 있다.

근데 4자 이상 입력 받는건 너무 쉬운 거잖아요. 최소한 정규표현식은 넣어줘야죠. 다음 요구사항을 만족하게 만들어주세요.

• 시작은 알파벳 대문자나 소문자로 해주세요.
• 이어지는 문자열은 알파벳 대문자, 소문자, 혹은 숫자로 이루어져야 하며, 최소 8자 이상 입력하게 해주세요.

<input
	...
    {...register("id", {
    	required: "아이디를 입력해주세요.",
        pattern: {
        	value: /^[A-Za-z][A-Za-z0-9]{8,}$/,
            message: '아이디를 정확하게 입력해주세요',
        },
    })}
/>

위와 같은 요구사항을 충족하기 위해 나는 pattern을 사용하고 pattern안에 정규표현식과 메시지를 작성해줬다. 전반적인 부분만을 살펴보았을 뿐인데 생산성, 가독성, 유연성과 확장성 모두가 눈에 띄게 좋아진 것을 알 수 있다.

하지만 프론트엔드는 사용자에게 화면을 렌더링 해주어야 하기에, 아무리 코드가 좋더라도 성능이 떨어진다면 가치가 떨어진다고 생각한다. 그렇다면 렌더링과 관련한 성능은 어떨까?

3. 성능

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

위 홈페이지에서는 성능에 대한 이야기와 함께 다른 라이브러리들과 성능을 비교한 깃허브 레포를 보여주고 있다. performance-compare를 확인해보면, 다른 라이브러리에 비해 성능이 앞서는 것을 확인할 수 있었다.

그렇다면 내가 직접 구현했을 때와 성능을 비교하면 얼마나 차이가 날까?

React Hook Form 적용 전

React Hook Form 적용 후

개발자도구의 performance를 실행시키고, 둘 다 동일하게 1234, 1234를 아이디 비밀번호를 입력하였을 때의 성능 차이를 확인해보면 렌더링 시간에는 큰 차이가 없어보인다. 오히려 스크립팅 시간이 줄어든 것을 확인할 수 있는데, 그렇다면 우리는 React Hook Form 라이브러리를 사용하지 않을 이유가 없지 않은가?

후기

이번 해커톤을 통해 처음으로 양식 라이브러리를 접해보았는데 React Hook Form은 생산성을 증대시켜주고 팀원과의 협업을 더 원활하게 해주어 정말 큰 도움이 되었다. 아직까지 React Hook Form에서 사용해보지 않은 많은 기능이 있는데, 다음에도 양식을 제작하게 된다면, React Hook Form에 더욱 깊이있게 파고 들어 보아야겠다. 😊

참고

https://velog.io/@godori/banner-maker

혹시 잘못된 내용이 있거나, 오타가 있다면 댓글로 작성해주시면 감사하겠습니다!! 😸