리액트 텍스트에어리어 auto height 적용하기

  const textAreaRef = useRef(null);
  const [textAreaHeight, setTextAreaHeight] = useState("auto");
  const [parentHeight, setParentHeight] = useState("auto");

  const parentStyle = {
    minHeight: parentHeight,
  };

  const textAreaStyle = {
    height: textAreaHeight,
  };

  // 댓글의 내용이 변할 때마다 textAreaRef의 높이를 조정해 준다.
  useEffect(() => {
    if (textAreaRef && textAreaRef.current) {
      setParentHeight(`${textAreaRef.current.scrollHeight}px`);
      setTextAreaHeight(`${textAreaRef.current.scrollHeight}px`);
    }
  }, [message]);

  // 댓글의 값이 변할 때 추가로 높이를 보정해 준다.
  const onChangeHandler = (event) => {
    setTextAreaHeight("auto");
    setParentHeight(`${textAreaRef.current.scrollHeight}px`);
    setMessage(event.target.value);
  };
  ...
  // 댓글 textarea 부분. parentStyle과 textAreaStyle로 조정해 줌.
  <div style={parentStyle}>
    <textarea
      className={`${PublicShowStyles["message-textarea"]} mt-20 p-10`}
      placeholder="댓글 남기기"
      value={message}
      onChange={(e) => onChangeHandler(e)}
      ref={textAreaRef}
      style={{
        height: textAreaHeight,
        overflow: "hidden",
      }}
      rows={3}
    />
  </div>

댓글을 저장하거나 수정 후 높이를 원래대로 맞춰줘야 할 경우

setParentHeight("auto");

setTextAreaHeight("auto");

이런식으로 다시 auto로 돌려주면 된다.