textarea
에 입력한 내용이 길어지면, 스크롤바가 생기는데, 스크롤바 없이 자동으로 textarea
의 높이가 내용 크기에 맞게 자동으로 조절되도록 만들고 싶었다.
const [height, setHeight] = useState();
<textarea
onKeyUp={(e: any) => {
if (60 < e.target.scrollHeight) {
setHeight(e.target.scrollHeight);
}}}
style={{ height: `${height}px` }}
></textarea>
textarea {
overflow-y : hidden; //scroll모양 감추기
}
이렇게 하면, textarea
내용이 길어질때 자동으로 높이가 커지게된다.
하지만, 내용을 지워서 높이가 다시 작아질때 textarea
는 높이가 그대로 유지되는 문제가 있다.