프로젝트에 폼, 양식을 넣어야 했던 경험이 다들 있을겁니다. 회원가입 폼 정도는 다른 라이브러리의 도움을 받지 않고 직접 구현할 수 있지만, 실제 프로덕트을 구현할 때는 생각보다 까다롭습니다. 특히, 비즈니스의 요구사항이 녹여진 폼을 만들게 되면 폼을 관리 해 주는 라이브러리 없이 구현 하는건, 실력에 대한 믿음보다 기술 부채의 빚이 크게 쌓이게 됩니다.
현재 제품을 개발하면서 몇 개의 폼 라이브러리를 사용해봤는지 세어봤습니다. formik, react-final-form, redux-form 까지 3개의 라이브러리를 사용해봤습니다. 간단하게 후기를 남기자면...
API(액션 생성자)가 편리한 redux-form 을 사용했지만, 성능 문제를 체감한 뒤, react-hook-form 라이브러리를 찾게되었습니다.
처음에는, 훅 기반으로 폼을 직접 만들기 위해(😅) 구글에서 검색하다가 react-hook-form 라이브러리를 찾게 되었습니다. 이 라이브러리의 특징은 다음과 같습니다.
<form/>
태그나 <input />
태그에 ref
를 사용하여 폼을 구성할 수 있습니다.$ 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 오류 핸들링을 위해 커스텀 훅을 만들어서 사용하고 있습니다. 해당 부분에 대해서는 다음에 글로 다루도록 하겠습니다.
감사합니다.
좋은 정보 감사합니다 :)