[React+TypeScript] useRef를 사용해서 textarea의 높이를 자동으로 조절하기

문제 상황

 

트위터 클론코딩 중 포스트를 작성하는 textarea에 입력한 텍스트양이 많아지면 보기 싫은 스크롤바가 생기는 것을 확인했다. 단순히 스크롤바를 커스텀해도 되지만, 실제 트위터에서는 텍스트양에 따라 입력칸의 높이가 자동으로 늘어나도록 하고 있기 때문에 이를 적용해보기로 했다.

 

 

해결 방법

1. useRef 리액트훅을 통해 높이를 조절할 textarea DOM 요소에 접근한다.

2. textarea 요소에 입력이 발생할 때마다, 해당 요소의 scrollHeight만큼 height를 설정해준다.

 

 

소스코드

import { useRef, useState } from "react"; // useRef 리액트 훅 사용

export default function PostTweetForm() {
  const [post, setPost] = useState("");
  
  // 1. useRef 훅을 사용하여 높이를 조절할 textarea 요소 접근
  const textareaRef = useRef<HTMLTextAreaElement | null>(null);

  // 2. textarea 요소에 입력이 일어날 때 실행할 함수
  const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setPost(e.target.value);

	// 접근한 textareaRef가 있으면, height를 해당 요소의 scrollHeight로 설정
    if (textareaRef && textareaRef.current) {
      textareaRef.current.style.height = "auto";
      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
    }
  };

  return (
  	<>
      <textarea
        ref={textareaRef} // 높이를 변경할 textarea에 접근
        onChange={onChange}
        value={post}
      />
     </>
  );
}

 

 

결과