이 멋진 튜토리얼처럼 zod 및 React-hook-form을 사용하여 양식 유효성 검사를 기록하는 방법은 무엇입니까?

Question

Svelte에서 zod 검증 튜토리얼을 따라해 보았습니다. 나는 이것에 대한 경험이 없기 때문에 간단한 React/next 앱에서 이 코드 기능을 어떻게 복제할 수 있는지 궁금합니다. 비동기 함수에 무엇({request})이 전달될 것인지에 대해 고민하고 있습니다.

또한 이 작업은 useEffect 내부에서 수행해야 할까요, 아니면 양식 제출 시에만 호출해야 할까요?

으아악

이 튜토리얼의 저장소는 다음과 같습니다: https://github.com/huntabyte/sveltekit-form-validation/blob/main/src/routes/%2Bpage.server.js

Answer 1

내가 한 일은 다음과 같습니다.

1. 먼저 zod를 사용하여 유효성 검사 스키마를 정의했습니다.
2. 그런 다음 양식 제출 및 유효성 검사를 처리하기 위한 사용자 정의 후크를 만들었습니다. 이 후크에서는 양식 상태를 관리하기 위해 React-hook-form의 useForm 후크를 사용했습니다.
3. 양식 제출을 처리하기 위해 useForm의 handlerSubmit 함수를 내 사용자 정의 후크에 전달합니다.
4. handSubmit 함수에서는 양식 데이터의 유효성을 검사하기 위해 zod 유효성 검사 아키텍처의 구문 분석 메서드를 사용했습니다.
5. 검증이 성공하면 양식 데이터를 콘솔에 기록하겠습니다. 그렇지 않은 경우 양식 데이터와 유효성 검사 오류가 포함된 개체를 반환합니다.

전반적으로 이 접근 방식은 효과적이며 이해하고 구현하기 쉽습니다. 유효성 검사 코드를 어디에 넣을지에 대한 질문에 대해서는 useEffect에서 호출하는 대신 양식 제출 시 호출하는 것이 좋습니다.