기본 Form vs react-hook-form vs Formik

기본 Form vs react-hook-form vs Formik

1. 리액트에서 기본 Form 다루기

• 리액트로 form을 다루기 위해서는 많은 보일러 플레이트 코드가 필요하다.

  • 유저 입력 값의 상태를 관리하고 검증하기
  • 유효하지 않은 에러 메세지를 추적하기
  • 폼 제출 다루기

• Form 상태를 다루는 작업은 React로 개발할 때 많은 리소스가 들어간다.

• React는 인터페이스의 동작을 제어하는 데만 초점을 맞춘 미니멀한 UI라이브러리로, 사용자의 활동에 대한 응답으로 UI가 적절하게 변경되어야 한다.

• Controlled Components를 사용하여 State 값을 상태로 저장하는 방법을 제공한다.

2. FORMIK

장점	단점
단순하고 간결한 API	복잡한 Form에는 어울리지 않는다
하나의 state store 관리	특정 state만 watch를 할 수 없고 전체를 업데이트를 한다.
유효성 검사 및 오류 메시지등을 쉽게 처리 가능	복잡한 Form을 다루게 되는 상황이라면 불필요한 re-render 가 발생할 수가 있다. (성능 저하 발생)

3. React-Hook-Form

1. 성능 이슈

• Formik, Redux Form과 비교했을 때 react-hook-form의 성능이 가장 뛰어나다. (https://github.com/react-hook-form/performance-compare)

2. 리렌더링

• Formik은 provider 방식이다. form 내에 있는 컴포넌트가 상태를 공유하므로 불필요한 리렌더링이 발생할 수 있다. (provider로 묶여 있으므로 특정 state만 watch할 수 없음)
• react-hook-form은 provider 방식 대신 비제어 컴포넌트(ref) 방식을 사용해 불필요한 리렌더링을 방지할 수 있다.

3. 간결한 코드

• Formik은 유효성 체크를 위해 보통 Yup 라이브러리를 함께 사용하며, 복잡한 Form을 다루기 어렵다.
• react-hook-form은 비교적 코드량과 용량이 적으며, 리액트 syntax와 비슷하다.

4. 타입스크립트

• react-hook-form은 타입스크립트를 지원한다.

특징
리렌더링 최소화 (state로 관리하지 않는다.)
독립된 컴포넌트 단위로 리렌더링 발생
빠른 마운팅 속도
타입스크립트를 지원한다.

Formik VS React-hook-form (2022년 8월 기준)

작년까지만 해도 압도적으로 formik의 사용량이 우세했다.

올해 5월부터 react-hook-form의 사용량이 증가한 것을 볼 수 있다.

• react-hook-form

• formik

=> react-hook-form 공식 문서에서 formik와 비교한 마운트 횟수와 소요시간이다. react-hook-form이 우세하다.

=> 왼쪽이 formik이고, 오른쪽이 react-hook-form이다. winner는 react-hook-form...

=> formik는 다른 라이브러리를 9개나 의존하지만, react-hook-form은 어떠한 라이브러리도 의존하지 않는다.

고민말고 react-hook-form 쓰자