😀 <textarea /> 높이 자동 처리

textarea는 기본적으로 본인의 높이보다 더 많은 컨텐츠를 넣으면 스크롤바가 생성되게 됩니다.
이번에 구현하는 것은 문자에 따라서 높이가 자동으로 줄어들고 늘어나는 것을 만드는 방법을 기록하려고 합니다.

react-hook-form과 병합해서 처리했기 때문에 추가적인 코드가 조금 더 있습니다.

• 실제 적용 코드

// 2022/04/30 - comment Ref - by 1-blue
const { ref, ...rest } = register("comment");
const commentRef = useRef<HTMLTextAreaElement | null>(null);

// 2022/04/30 - textarea 자동 높이 조절 - by 1-blue
const handleResizeHeight = useCallback(() => {
  if (!commentRef.current) return;

  commentRef.current.style.height = "auto";
  commentRef.current.style.height = commentRef.current?.scrollHeight + "px";
}, [commentRef]);
  
// jsx
<textarea
  placeholder="댓글을 작성하세요"
  {...rest}
  className="w-full p-4 focus:outline-none resize-none rounded-sm bg-zinc-200 dark:bg-zinc-600"
  onInput={handleResizeHeight}
  ref={(e) => {
    ref(e);
    commentRef.current = e;
  }}
/>

참고한 사이트

• textarea 자동 높이 조절
• react-hook-form 공식 문서 - ref