React Hook Form 시리즈 포스팅 - React Hook Form이란?

 

React Hook Form은 Hooks  기능을 활용하여 쉽고 빠르고 간단하게 Form Validation을 처리하는데 최적화된 라이브러리입니다. 

다른 많은 라이브러리도 있지만 성능, 업데이트 빈도수, 프로젝트 생성일자 등을 고려해봤을 때 가장 신뢰성 있는 프로젝트라고 생각됩니다.

 

Formik vs React Hook Form vs Redux Form 트렌드 비교

 

formik vs react-hook-form vs redux-form

 

Stars만 보면 formik이 조금 우세하긴 하지만, 이슈 개수와 마지막 Updated 날짜를 보면 react-hook-form이 관리를 더 잘한다고 보입니다. 번들 사이즈도 보게 되면 formik이 react-hook-form보다 60% 이상 높습니다. 이러한 기준으로 react-hook-form을 선정하게 되었으며, 시리즈물 포스팅을 작성하게 되었습니다.

 

 

목차

1.  React Hook Form 시작하기
   1. 설치
   2. 기본 사용법 설명
   3. DevTool 사용하기
   4. 서드파티 라이브러리와 함께 사용하기
   5. 글로벌 상태관리 라이브러리와 연동
   6. 에러 처리
2. 기본 API 소개
   1. useForm
   2. useController (Controller)
   3. useFormContext
   4. useWatch
   5. useFormState (ErrorMessage)
   6. useFieldArray
3. 고급 기능
   1. 폼 끼리 연결
   2. 접근성 관리
   3. 테스팅
   4. FormProvider 성능 최적화
   5. Transform 기능 활용하기
   6. Resolver를 CustomHook을 활용해서 사용하기

 

 

모든 예제 코드는 TypeScript 기반으로 작성됩니다. TypeScript API는 공식 문서에도 나와있습니다.