[css] 사용자의 입력에 따라 높이가 조절되는 textarea 만들기 (input 줄바꿈하기, textarea 높이 자동 조절하기, textarea 아래에 여백 생길 때)

 

input과 같은 모습을 하고 있지만, 그 형태를 유지하면서 줄바꿈을 할 수 있는 UI를 만들고 싶을 때 ?
자동으로 높이가 조절되는 textarea를 만들어 구현이 가능하다. 

 

자동 높이 조절 textarea ?

---

기본적인 형태의 textarea는 고정된 높이를 가지고 높이 이상의 줄바꿈이 일어나면 스크롤이 생기는 방식으로 되어있다.

기본 형태의 textarea

 

자동 높이 조절 textarea는 고정된 높이값 없이 사용자가 입력하는대로 줄바꿈에 따라 높이가 자동 조절되는 textarea다

 

예시 ) 구글폼의 설문 제작 시 질문 입력 textarea

 

자동 높이 조절 textarea 만들기

---

  const textarea = useRef();

  const handleResizeHeight = () => {
    textarea.current.style.height = 'auto'; //height 초기화
    textarea.current.style.height = textarea.current.scrollHeight + 'px';
  };

 

textarea의 onChange 이벤트 핸들러에 위 handleResizeHeight 함수를 등록한다.

사용자가 데이터를 입력할 때마다 textarea의 스크롤 높이만큼 실제 textarea의 height 값을 조절해주는 로직이다.

현재 리액트로 작업을 하고 있어 useRef를 이용해 높이를 조절하고자 하는 textarea 엘리먼트에 ref를 지정해 style 값을 조절해주었다.

 

handleResizeHeight 함수 첫번째 줄은 자동으로 현재 줄바꿈 된 데이터 높이에 맞게 height를 맞춰주는 로직인데, 

이 로직이 있어야 데이터를 지워 스크롤 높이가 줄어들었을 때의 높이도 자동으로 조절이 가능하다.

 

 

해당 로직을 넣었더니 textarea의 height 값 조절이 안 돼요 , 아래 여백이 생겨요

---

handleResizeHeight 함수를 넣어서 자동 높이 조절은 잘 되는데.. 생각한 것처럼 input 같은 형태에서 줄바꿈이 되는 느낌이 아니다.  아래쪽에 여백이 생겼다.. height 값을 아무리 조절해봐도 사라지지 않는다. 왜 한줄에서 두줄로 되지 않는 거지 ? 

 

해결방법

textarea는 rows라는 속성을 가지고 있는데 텍스트 입력 영역 중 보이는 영역의 라인수를 명시하는 역할이다.

row의 기본 값은 2로 row 속성을 따로 지정해주지 않으면 textarea는 항상 2줄의 텍스트를 보여준다.

따라서, rows 속성에 1을 지정해주면 해결된다.

 

<textarea rows={1} />

 

완성

---