[React Hook Form] useRef 연결하여 사용하기

React-use-Form을 사용하다 보면, useRef를 연결하여 사용할 일(스크롤 관련이나, 포커싱 관련 이벤트를 처리할 때)이 종종 있다.

예를 들어, textarea의 인풋 창을 수정할 때 value의 높이에 따라 textarea의 크기를 조절할 때가 있다.

그런 경우, 간단하게 아래의 코드처럼 useRef를 reactFrom 요소와 연결한 뒤, 평소에 사용하던 것처럼 useRef를 사용해주면 간단하게 해결이 된다.

const inputRef = useRef<HTMLTextAreaElement | null>(null);

const { register } = useForm({
  defaultValues: {
    inputValue: ''
  }
});
const { ref, ...rest } = register('inputValue');

useEffect(() => {
  if (inputRef.current !== null) {
    inputRef.current.style.height = `${inputRef.current.scrollHeight}px`;
  }
}, [inputRef]);

return (
  <textarea
  {...rest}
    ref={(e) => {
      ref(e);
      inputRef.current = e;
    }}
  />
)

Reference

React Hook Form FAQS