프로젝트에 폼, 양식을 넣어야 했던 경험이 다들 있을겁니다. 회원가입 폼 정도는 다른 라이브러리의 도움을 받지 않고 직접 구현할 수 있지만, 실제 프로덕트을 구현할 때는 생각보다 까다롭습니다. 특히, 비즈니스의 요구사항이 녹여진 폼을 만들게 되면 폼을 관리 해 주는 라이브러리 없이 구현 하는건, 실력에 대한 믿음보다 기술 부채의 빚이 크게 쌓이게 됩니다.

현재 제품을 개발하면서 몇 개의 폼 라이브러리를 사용해봤는지 세어봤습니다. formik, react-final-form, redux-form 까지 3개의 라이브러리를 사용해봤습니다. 간단하게 후기를 남기자면...

  • formik 은 이 라이브러리들 중 가장 무난했지만, 공식 문서와 실제 타입 선언 파일이 일치하지 않는 문제가 있었습니다.
  • react-final-form 은 실제 제품에 사용하지는 못했습니다. final-form 자체의 사용 난이도가 formik 과 비교했을 때 높은 편이였습니다.
  • redux-form 은 성능은 가장 좋지 않고, 리덕스를 사용해야 하는 단점이 있지만, 반대로 리덕스를 사용할 때 비동기 미들웨어에서 편리하게 폼을 제어할 수 있는 API가 있습니다.

API(액션 생성자)가 편리한 redux-form 을 사용했지만, 성능 문제를 체감한 뒤, react-hook-form 라이브러리를 찾게되었습니다.

react-hook-form

처음에는, 훅 기반으로 폼을 직접 만들기 위해(😅) 구글에서 검색하다가 react-hook-form 라이브러리를 찾게 되었습니다. 이 라이브러리의 특징은 다음과 같습니다.

특징

  • Hooks API!
  • 제어되지 않는 컴포넌트 기반으로 작동하여 성능이 우수합니다.
  • 다른 라이브러리와 다르게 폼을 위한 컴포넌트나 필드를 위한 컴포넌트가 없습니다. <form/> 태그나 <input /> 태그에 ref 를 사용하여 폼을 구성할 수 있습니다.
  • 유효성 검증을 위한 내부 기능이 포함되어 있지만, 필요하다면 yup 을 사용할 수 있습니다.
  • 타입스크립트로 작성된 프로젝트라서 타입스크립트와 아주 잘 맞습니다 👍

설치

$ yarn add react-hook-form

사용법

이 라이브러리는 제가 사용해본 폼 라이브러리들 중 가장 사용법이 직관적이었습니다. <FormContext/> 라는 컨텍스트를 제외하면 별도의 컴포넌트가 존재하지 않습니다.

import useForm from 'react-hook-form';

const Form = () => {
  const { register, handleSubmit } = useForm();

  const onSubmit = data => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" name="name" ref={register} />
      <input type="submit" />
    </form>
  );
};

진짜 간단합니다. 실제 작동하는 예제 코드는 여기에 많이 있습니다.

사용 후기

지금 프로덕트는 redux-form 기반으로 많은 폼을 만들었었는데 새로운 폼에 일부 적용해 본 결과, 단계적으로 이 라이브러리를 사용하여 리팩토링 할 계획을 갖게되었습니다. 다른 라이브러리에 의존적이지 않아서 충분히 부분적으로 사용할 수 있습니다.

추가적으로 redux-form 을 대체하기 위한 필수 조건인, API 오류 핸들링을 위해 커스텀 훅을 만들어서 사용하고 있습니다. 해당 부분에 대해서는 다음에 글로 다루도록 하겠습니다.

감사합니다.