[Next.js] register와 ref를 같이 사용할 때의 문제점

🙀문제점

👉문제 내용

기존에 useForm에 register를 이용해서 댓글 등록 기능을 구현했었습니다.

댓글 등록 기능에 댓글 길이에 따른 동적인 textarea를 만들어주기 위해서 ref를 추가해주었는데요.

ref를 추가하기 전에는 정상적으로 댓글이 잘 등록됐지만 ref를 추가한 이후 댓글이 등록되지 않는 문제가 생겼습니다.

 

import { cls } from "@libs/client/utils";
import { useRef, useState } from "react";
import { UseFormRegisterReturn } from "react-hook-form";

interface TextAreaProps {
  label?: string;
  name?: string;
  register: UseFormRegisterReturn;
  [key: string]: any;
}

export default function TextArea({
  label,
  name,
  register,
  ...rest
}: TextAreaProps) {
  const textRef = useRef<any>(null);
  const handleResizeHeight = () => {
	...
  };
  return (
    <div>
      {label ? (
        <label
          htmlFor={name}
          className="mb-1 block text-sm font-medium text-gray-700"
        >
          {label}
        </label>
      ) : null}
      <textarea
        id={name}
        {...register}
        className={
          "h-[120px] w-full px-3 py-2 mt-1 shadow-sm  border focus:ring-orange-500 rounded-md border-gray-300 focus:border focus:border-orange-500 focus:outline-none"
        }
        ref = {textRef} // 추가해줬음
        {...rest}
        onChange={handleResizeHeight}
      />
    </div>
  );
}

👉문제 원인

useForm의 register에 ref가 존재하기 때문에 해당 ref를 이용해야 하는데 이용하지 않은 것이 원인이었습니다.

---

✨해결 방법

register 내에 있는 ref를 이용해주어서 해결했습니다.

import { cls } from "@libs/client/utils";
import { useRef, useState } from "react";
import { UseFormRegisterReturn } from "react-hook-form";

interface TextAreaProps {
  label?: string;
  name?: string;
  register: UseFormRegisterReturn;
  [key: string]: any;
}

export default function TextArea({
  label,
  name,
  register,
  ...rest
}: TextAreaProps) {
  const textRef = useRef<any>(null);
  const handleResizeHeight = () => {
    textRef.current.style.height = "122px";
    textRef.current.style.height = textRef.current.scrollHeight + "px";
  };

  return (
    <div>
      {label ? (
        <label
          htmlFor={name}
          className="mb-1 block text-sm font-medium text-gray-700"
        >
          {label}
        </label>
      ) : null}
      <textarea
        id={name}
        {...register}
        className={`h-[120px] w-full px-3 py-2 mt-1 shadow-sm resize-none border focus:ring-orange-500 rounded-md border-gray-300 focus:border focus:border-orange-500 focus:outline-none overflow-y-hidden`}
        ref={(e) => { // 수정
          register.ref(e);
          textRef.current = e;
        }}
        {...rest}
        onChange={handleResizeHeight}
      />
    </div>
  );
}