완벽한 React 폼: Zod & React Hook Form

폼은 B2B SaaS 제품을 움직이는 핵심 요소입니다.

대부분의 개발자는 폼을 잘못된 방식으로 만듭니다. 바로 controlled components를 사용하는 것이죠. 이는 모든 input을 useState 훅에 바인딩한다는 의미입니다.

이는 성능 문제를 야기합니다.

만약 폼에 20개의 필드가 있다면, 글자 하나를 입력할 때마다 폼 전체가 리렌더링됩니다. 10글자 이름을 입력하면 총 10번의 전체 리렌더링이 발생합니다. 이로 인해 저사양 기기에서는 앱이 느려지게 됩니다.

수동 유효성 검사(Manual validation) 또한 문제입니다. 모든 필드에 대해 "if" 문을 작성하는 것은 지저분하며, TypeScript의 타입 안정성(safety)도 보장할 수 없습니다.

더 나은 방법이 필요합니다.

React Hook Form과 Zod를 사용하여 이 문제를 해결하세요.

React Hook Form은 HTML refs를 통해 uncontrolled inputs를 사용합니다. 데이터는 DOM에 유지됩니다. 폼은 에러가 발생하는 경우와 같이 꼭 필요한 경우에만 리렌더링됩니다.

Zod는 유효성 검사를 담당합니다. 데이터의 정확한 형태(shape)를 정의합니다.

워크플로우는 다음과 같습니다:

  1. Zod schema를 정의합니다. 이는 단일 진실 공급원(single source of truth) 역할을 하며, 런타임 유효성 검사와 TypeScript 타입을 모두 제공합니다.

  2. zodResolver를 사용합니다. 이를 통해 React Hook Form을 Zod schema에 연결합니다.

  3. register 함수를 사용합니다. 이를 통해 지속적인 리렌더링을 유발하지 않고 input을 폼에 연결합니다.

장점:

  • 입력 지연(input lag)이 전혀 없습니다. 대규모 폼에서도 부드럽게 작동합니다.
  • 타입 안정성(Type safety). 데이터가 API 요구 사항과 일치합니다.
  • 코드 감소. 수동 유효성 검사 로직을 작성할 필요가 없습니다.

React state와 씨름하는 것을 멈추세요. refs와 schema를 사용하여 전문적인 폼을 구축하세요.

출처: https://dev.to/iprajapatiparesh/bulletproof-react-forms-zod-react-hook-form-205j