[Ez to Play / Error Note] React Hook Form 사용시 ref={register}에서 에러나면

Type 'UseFormRegister<FieldValues>' is not assignable to type 'LegacyRef<HTMLInputElement> | undefined'
Type 'UseFormRegister<FieldValues>' is not assignable to type '(instance: HTMLInputElement | null) => void'.
Types of parameters 'name' and 'instance' are incompatible.
Type 'HTMLInputElement | null' is not assignable to type 'string'.
Type 'null' is not assignable to type 'string'.

 

 

React Hook Form을 사용해보는데 input에 register를 주는 부분에서 에러가 났다.

 

 

알아보니 버전이 올라가면서 문법이 바뀐 것인데, v6까지는 위와 같이 ref={register} 형태로 사용하고, v7부터는 {...register} 형태로 써야 한다고 한다.

 

 

괄호 안에 name(위 코드에선 'email')을 넣어주고, 기존 코드의 name='email'은 중복되므로 삭제해주면 console.log(watch('email'))로 확인했을 때 아래와 같이 입력한 내용을 잘 받아오는 것을 확인할 수 있다.

 

 

 

 

---

참고자료

 

https://stackoverflow.com/questions/67791756/react-hook-form-error-type-useformregisterformdata-is-not-assignable-to-ty

https://github.com/PacktPublishing/ASP.NET-Core-5-and-React-Second-Edition/issues/11