React Hook Form

React에서 폼을 관리하고 검증하는 데 사용되는 라이브러리로, 폼 상태 관리를 간소화하는 데 도움을 준다.

**useForm**은 React 컴포넌트 내부에서 폼 상태를 관리하고, HTML 표준 <form> 태그를 포함하여 폼 데이터를 관리하고 검증을 도와주는 훅

기존 <form> 태그는 기본적으로 브라우저에서 폼 데이터를 관리하고, 제출 이벤트를 처리하는데, React Hook Form은 다음과 같은 방식으로 이를 확장

Zod

타입스크립트 우선 스키마 선언 및 유효성 검증 라이브러리.

react-hook-form을 통해서 전체적인 form들을 관리해 주고 특정 form들에 매핑되어야 하는 값이 올바른지에 대한 유효성의 판단을 zod가 해주면서 효과적인 입력 값 검증 기능을 제공해 주기 때문이다.

기본 React Hook Form에서는 register에 유효성 검사를 추가하더라도, 검증된 데이터의 타입 정보를 보장할 수 없다. 이는 런타임 중에 예상치 못한 값이 들어왔을 때 디버깅을 더 어렵게 만든다.

Zod를 사용하면 입력값이 TypeScript 타입으로 연결되기에 코드가 더 예측 가능하며 런타임 오류를 줄이는 데 큰 도움을 준다.

스키마 정의 및 검증 라이브러리로, TypeScript와의 강력한 통합을 제공. 스키마를 정의하면 입력 데이터를 검증할 수 있으며, 타입 안전성을 보장.

비제어 컴포넌트 방식으로 구현되어있기에 렌더링 이슈를 해결하면서도, form의 데이터와 상태를 Provider 아래라면 어느 곳에서든지 props drilling 없이 사용할 수 있다.