[React] textarea 입력에 따라 높이 자동 조절하기

CSS

textarea {
  all: unset;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  overflow: hidden;
  width: 100%;
  height: 1.7em;
  line-height: 1.7em;
}

 

 

컴포넌트

import { useRef, useState } from "react";

export default function Write() {
  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
  const [text, setText] = useState("");

  const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setText(e.currentTarget.value);
    // textarea 높이 조절
    if (textareaRef && textareaRef.current) {
      textareaRef.current.style.height = "0px";
      const scrollHeight = textareaRef.current.scrollHeight;
      textareaRef.current.style.height = scrollHeight + "px";
    }
  };

  return (
    <div className="wrapper">
      <textarea
        ref={textareaRef}
        value={text}
        onChange={onChange}
        placeholder="내용을 입력하세요."
      />
    </div>
  );
}

 

 

 

 

결과물

(높이 변화를 쉽게 볼 수 있도록 잠깐 테두리 적용했습니다.)