* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

강의명: 4-5. React Hook Form /w Zod(2)

비록 수업에서 다루진 않았지만, 공식 문서를 확인한 결과 zod v4이 최신이며, 안정적임을 확인했습니다(공식 문서 왈, v4 또한 안정적이라고 스스로 소개했습니다). 그래서 zod를 v4으로 바꾸고, @hookform/resolvers를 같이 사용해 코딩하던 중 문제가 발생했습니다.

분명 안정적이라고 공식문서에 나와있어서 zod v4를 시도한 거였는데, 문제가 발생한 현재 상황에 대해 궁금증이 생겨 여쭤봅니다.

첫째, 혹시 zod v4와 @hookform/resolvers의 조합은 아직 안정적인지 않은 건지(zod v3과 @hookform/resolvers의 조합은 문제 없습니다), 아님 제가 놓친 부분이 있는 지 궁금합니다.

둘째, 두 가지 라이브러리를 혼합(?)해서 쓰는 경우, 어느 시기에 버전을 올리는 걸 고려해볼 수 있는 지 궁금합니다! (사실 제가 가장 궁금한 부분이 이 부분입니다. 버전을 올릴 때 고려해야 하는 부분들이 궁금합니다)

비록 수업 범위 내의 질문은 아닌 듯 싶지만, 개발하면서 버전을 올리는 시기에 대한 궁금증은 가질 수 있다고 생각하기에 여쭤봅니다. 답변해주신다면 감사하겠습니다(첫 번째 질문이 수업 범위 외의 질문이라면, 두 번째 질문에라도 답변해주시면 감사하겠습니다).

Argument of type 'ZodObject<{ email: ZodEmail; password: ZodString; }, $strip>' is not assignable to parameter of type 'ZodType<{ email: string; password: string; }, any, { email: string; password: string; }>'.

Type 'ZodObject<{ email: ZodEmail; password: ZodString; }, $strip>' is missing the following properties from type 'ZodType<{ email: string; password: string; }, any, { email: string; password: string; }>': _type, _parse, _getType, _getOrReturnCtx, and 7 more.ts(2345)

const signInSchema: z.ZodObject<{

email: z.ZodEmail;

password: z.ZodString;

}, z.core.$strip>

작성한 코드 및 에러 메세지

import { zodResolver } from "@hookform/resolvers/zod";
import { FieldValues, useForm } from "react-hook-form";
// 기존 코드 ↓
// import { z } from "zod"; 
// 수정한 코드 ↓
import { z } from "zod/v4"; 

const signInSchema = z.object({
    // 기존 코드 ↓
    // email: z.string().email({ message: "This is required"}), 
    // 수정한 코드 ↓
    email: z.email({ error: "This is required" })
  })
  
  const SignInForm = () => {
    const { register, handleSubmit, formState: { errors } } = useForm({
      defaultValues: {
        email: ""
      },
      // TypeError가 발생하는 부분 ↓
      resolver: zodResolver(signInSchema),
    }) 
  
    const onSubmit = (value: FieldValues) => {console.log(signInSchema.parse(value))}

  return (
    <form onSubmit={handleSubmit(onSubmit)>
      <div>
        <label htmlFor="email">Email</label>
        <input
          placeholder="Email"
          // 기존 코드 ↓
          // type="email"
          // {...register("email", { required: "This is required." })} 

          // 수정한 코드 ↓
          {...register("email")}
        />
      </div>
      <span>{errors.email?.message}</span>

      <button type="submit">
        Sign In
      </button>
    </form>
  );
};

export default SignInForm;

오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.

Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.

Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!