[React] react-hook-form 버전 오류

react-hook-form으로 로그인을 구현하던 중 아래와 같은 오류가 발생했다.

get.ts:11 Uncaught TypeError: path.split is not a function at get (get.ts:11:1)

Getting Uncaught TypeError: path.split is not a function in react

 

react-hook-form이 6.XX에서 7.0.0으로 업데이트되어 ref={register} 대신 {...register}을 사용해야 한다고 스택오버플로우에 답변이 달려있었다.

✅ 오류 코드 

form 부분을 보면 ref={register}를 써서 오류가 났다.

import React, { useState } from "react";
import { useForm } from "react-hook-form";

const LoginForm = () => {
  const [state, setState] = useState({
    email: "",
    password: "",
  });
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => {
    setState(data);
    console.log(state);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" name="email" ref={register} />
      <input type="password" name="password" ref={register} />
      <button type="submit">로그인</button>
    </form>
  );
};

export default LoginForm;

 

✅ 해결한 코드

ref 부분을 아래와 같이 수정해주면 해결된다!

<input type="text" name="email" {...register} />
<input type="password" name="password" {...register} />