textarea값 자동으로 늘어나게 하기

textarea을 만들때 rows으로 특정 크기를 지정할 수 있지만 데이터가 너무 많을때는 스크롤바가 생기는 문제가 생기고
너무 적을때는 데이터에 비해서 칸이 너무 커서 칸을 필요없이 낭비하게 된다.
그것을 위해서 자바스크립트를 통해서 크기를 자동으로 조절 하고싶다는 생각이 들었다.
textarea는 값을 저장할때 띄어쓰기 줄바꿈등을 알아서 저장하기 때문에 이것을 불러올때 띄어쓰기 줄바꿈이 알아서 적용되서 나오게 된다.

resizeTextarea함수를 지정했다.

// textarea의 내용이 변경될 때마다 크기 조정
function resizeTextarea(textarea) {
    textarea.style.height = 'auto'; // 먼저 기존의 높이를 초기화
    textarea.style.height = textarea.scrollHeight + 'px'; // 내용의 높이에 따라 새로운 높이를 설정
}

function resizeTextarea(textarea) { ... }:
resizeTextarea 함수를 선언하였다.
이 함수는 파라미터로 textarea 엘리먼트를 받는다.

textarea.style.height = 'auto';:
먼저 textarea의 높이를 'auto'로 설정한다.
'auto' 값은 내용의 크기에 따라 자동으로 조정되는 값을 의미한다.
이렇게 설정함으로써 이전에 지정된 높이가 초기화된다.

textarea.style.height = textarea.scrollHeight + 'px';:
scrollHeight 속성은 textarea의 콘텐츠의 전체 높이를 나타내며
입력된 텍스트의 높이에 따라 textarea의 높이를 자동으로 조정하기 위해 사용된다.
이전 단계에서 'auto'로 높이를 초기화했으므로, 이제 scrollHeight 값을 가져와서 textarea의 높이로 설정한다.

즉, 이 코드는 텍스트 입력이 변경될 때마다 textarea의 크기를 자동으로 조정하여 텍스트 내용이 모두 보여지게 한다.
사용자가 텍스트를 입력하면 textarea의 높이가 자동으로 늘어나며
줄바꿈이 발생하거나 스크롤이 생기지 않고 텍스트가 자연스럽게 표시된다.

이러한 자동 크기 조정 기능을 사용하면 textarea를 사용하는 사용자 경험을 향상시킬수 있다.
특히 긴 텍스트를 입력할 때 textarea의 크기가 동적으로 조정되므로 사용자가 텍스트를 보다 편리하게 입력할 수 있다.

입력할때 자동으로 늘어나게 하는 것 뿐만아니라 동적으로 생성하는 값을 통해서 크기를 자유롭게 조정함으로써 view에서 조금 더 이쁘게 보일 수 있는 것 같다.