<textarea/> 자동 사이즈 조절하기

<textarea/> 입력을 받으면 고정된 크기에 scroll이 생기는게아닌, 입력높이에 맞춰 height가 자동으로 조절되게 하고싶었다.

1번째 방법

const [height, setHeight]= useState(60);
<textarea
	onKeyUp={(e)=>{
  	setHeight(e.target.scrollHeight);
  }}
  style={{height:height+"px"}}
>
</textarea>

크기가 커질때는 잘동이되지만, 줄어들때는 작동이 안된다..

2번째 방법

const textareaRef = useRef();
function resize() {
    const textarea = textareaRef.current;
    textarea.style.height = "auto";
    textarea.style.height = textarea.scrollHeight + "px";
 }

<textarea
  onKeyUp={() => {
    resize();
  }}
  ref={textareaRef}
 ></textarea>

잘 작동한다!