양식은 사용자로서든 개발자 측에서든 모든 개발자가 접하게 되는 것입니다. 이는 대부분의 웹사이트에 필수적이지만 단순한 3필드 문의 양식부터 giga-monster-t-rex, 150개 필드가 있는 다중 페이지 양식, 동적 검증 및 비동기 검사에 이르기까지 복잡성이 매우 다양할 수 있습니다.
이 게시물에서는 React Hook Form, Zod 및 Shadcn을 사용하여 다양한 양식 요구 사항을 쉽게 처리하는 적응 가능하고 개발자 친화적인 솔루션을 만드는 방법을 살펴보겠습니다.
이번 게시물에서 개발할 양식은 다음과 같습니다. 후속 작업으로 훨씬 더 복잡한 양식의 고급 사용에 대한 또 다른 게시물을 작성할 계획이므로 계속 지켜봐 주시기 바랍니다 ?
양식을 작성하고 관리하는 데 사용할 스택을 살펴보겠습니다.
다음은 Shadcn 라이브러리의 양식 필드를 보여주는 예제 스니펫입니다.
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
다른 종류의 스택을 사용하는 것을 선호하더라도 React와 RHF를 고수하는 한 이는 여전히 여러분을 이끌어줄 유효한 예입니다.
기본 양식을 시연하는 데 사용할 애플리케이션은 필수 CRUD 작업이 포함된 관리 패널입니다. 여기에는 이메일 및 비밀번호 인증이 포함되며 모든 사용자의 테이블이 표시되는 메인 화면과 이 기사의 핵심이 될 사용자 생성 페이지의 두 페이지로 구성됩니다.
우리 양식에는 사용자가 지정된 요구 사항을 충족하지 않고는 양식을 제출(즉, 새 사용자 생성)할 수 없도록 하는 유효성 검사가 포함됩니다. 사용자 개체는 문자열, 날짜(예: 생년월일), 이메일 문자열 및 부울(예: 프리미엄 사용자 상태)과 같은 다양한 유효성 검사에 적합한 다양한 데이터 유형을 포함하므로 유효성 검사 예제에 대한 탁월한 후보입니다. 전체 Prisma 스키마 파일은 아래와 같습니다.
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
프로젝트를 시작하기 위해 todo-ts라는 TypeScript와 함께 사전 정의된 Wasp 템플릿을 사용하겠습니다. 이 템플릿에는 로그인 및 가입 화면을 포함하여 인증을 위한 기성 구성 요소 및 라우팅이 함께 제공됩니다. 또한 Wasp에서 CRUD 작업이 어떻게 작동하는지에 대한 확실한 예를 제공하므로 프레임워크를 처음 접하는 경우 이상적입니다. 또한 새로운 Wasp TypeScript SDK를 활용하여 사용자 정의에 대한 확장된 유연성을 제공하므로 구성을 관리할 것입니다.
Wasp 팀은 현대적인 오픈 소스 React/NodeJS 프레임워크 구축은 물론이고 이와 같은 콘텐츠를 만들기 위해 열심히 노력하고 있습니다.
여러분의 지지를 표현하는 가장 쉬운 방법은 Wasp 저장소에 별표를 표시하는 것입니다! ? 하지만 (기여를 위해 또는 단순히 제품을 테스트하기 위해) 저장소를 살펴볼 수 있다면 매우 감사하겠습니다. 아래 버튼을 클릭하여 Wasp에게 별표를 주고 응원을 보내주세요!
⭐️ 지원해 주셔서 감사합니다.
양식 작업을 위해 먼저 Zod 유효성 검사 스키마를 정의하겠습니다. 우리의 양식에는 문자열, 날짜, 부울의 세 가지 데이터 유형이 있습니다. 대부분의 필드에 유효성 검사를 적용합니다. 이름과 성은 필수이며 이메일은 내장된 이메일 유효성 검사를 활용합니다. Zod는 이메일, URL, UUID와 같은 다양한 유형에 대한 내장 유효성 검사를 통해 일반적인 문자열 유형 유효성 검사를 단순화합니다. 이는 이메일 필드에 도움이 됩니다.
추가 확인을 위해 날짜를 미래 날짜로 설정할 수 없으며 premiumUser 필드는 부울만 있으면 됩니다. Zod는 기본 유효성 검사 오류 메시지도 제공하지만 이를 사용자 정의할 수 있습니다. 예를 들어 이름: z.string().min(1) 대신 이름: z.string().min(1, '이름이 필요합니다')을 지정할 수 있습니다.
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
우리 양식은 양식 값 처리 및 유효성 검사, 오류 확인, 양식 상태 관리를 위한 광범위한 옵션을 제공하는 React Hook Form의 useForm 후크로 관리됩니다. Zod 검증 스키마를 통합하기 위해 Zod 해석기를 사용하여 React Hook Form이 이전에 정의한 검증을 적용할 수 있도록 하겠습니다.
양식의 defaultValues는 고객 개체에서 파생됩니다. 이 구성 요소는 신규 고객 추가와 기존 고객 편집에 모두 사용되므로 필요한 데이터를 입력으로 전달합니다. 신규 고객의 경우 몇 가지 합리적인 기본값이 사용됩니다. 기존 고객의 경우 데이터베이스에서 데이터가 검색됩니다. 기본값을 설정하고 createCustomer 또는 updateCustomer를 호출할지 결정하는 것 외에 양식 처리의 다른 모든 측면은 동일하게 유지됩니다.
model Customer {
id Int @id @default(autoincrement())
name String
surname String
email String
dateOfBirth DateTime
premiumUser Boolean
}
마지막 단계는 양식 자체를 생성하고 이를 TSX 파일에 조합하는 것입니다. 앞에서 설명한 것처럼 이 프로세스는 간단합니다. Shadcn 컨트롤과 함께 텍스트 입력, 날짜 선택기 또는 확인란을 사용하든 유사한 구조를 따릅니다.
const formSchema = z.object({
name: z.string().min(1, { message: 'Name is required' }),
surname: z.string().min(1, { message: 'Surname is required' }),
email: z.string().email({ message: 'Invalid email address' }),
dateOfBirth: z
.date()
.max(new Date(), { message: 'Date cannot be in the future' }),
premiumUser: z.boolean(),
});
완성된 애플리케이션을 보고 싶다면 GitHub 저장소(GitHub Repo)를 확인하세요. 이 기사를 통해 양식 작업이 더 쉬워졌기를 바랍니다. 양식 관련 콘텐츠에 더 관심이 있으시면 2부를 계속 지켜봐 주시기 바랍니다! 다음 부분에서는 애플리케이션을 향상시키기 위한 고급 패턴과 검증 기술을 살펴보겠습니다.
이 게시물이 마음에 드셨다면 GitHub에 Wasp 출연을 고려해 보세요! 귀하의 지원은 우리가 모든 사람을 위해 웹 개발을 더 쉽고 원활하게 만드는 데 도움이 됩니다. ?
위 내용은 React Hook Form, Zod 및 Shadcn을 사용하여 쉽게 React 폼 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
