[React+TS] textarea 줄바꿈하는 법, 입력한 값만큼 height 늘어나게 하는 법

문제점

---

react로 프로젝트를 진행하면서 글쓰기를 구현하고 있었다. textarea를 사용했는데, 원하는 텍스트를 입력했을 때 줄바꿈이 되지 않고 스크롤러가 생기는 문제점이 있었다.

오른쪽 끝을 보면 스크롤러가 생성된 것을 확인할 수 있다.

 

 

 

 

결과 화면

---

내가 원하는 것은 이런 것이 아니라 작성된 글의 높이만큼 textarea의 height이 늘어나길 바랬다!

결과 화면

바로 이렇게 말이다!

 

 

 

728x90

해결 방법 및 코드 설명

---

해결한 방법은 아래와 같다. 

const [text, setText] = useState('');
const textarea = useRef(null);

const resizeHeight = (
  textarea: React.RefObject<HTMLTextAreaElement>,
  e: React.ChangeEvent<HTMLTextAreaElement>
) => {
  if (textarea.current) {
    textarea.current.style.height = 'auto';
    textarea.current.style.height = textarea.current.scrollHeight + 'px';
    setText(e.target.value);
  }
};

 

// return 코드

<textarea
  ref={textarea}
  value={text}
  onChange={(e) => resizeHeight(textarea, e)}
></textarea>;

반응형

1. useRef를 사용하여 textarea라는 변수를 생성하고, <textarea>에 onChage 이벤트를 등록했다. 

 

2. onChange 이벤트에  resizeHeight이라는 함수를 생성해 할당하고, 2개의 인자를 줬다.

 

3. textarea 변수는 useRef로 처음에 {current: null} 값을 가지게 된다.(useRef 초기값이 current에 담긴다.) 그렇기 때문에 resizeHeight 함수 안에 코드를 작성할 때 if문을 사용하여 textarea.current 값이 있는지 먼저 확인하는 로직을 작성했다. 

 

4. textarea.current 값이 있다면 아래 값을 주어 auto resize가 가능하게끔 했다. 사용자가 데이터를 입력할 때마다 textarea의 스크롤 높이만큼 실제 textarea의 height 값을 조절해주는 코드이다. 

textarea.current.style.height = 'auto'; // height 초기화
textarea.current.style.height = textarea.current.scrollHeight + 'px';

 

 

 

 

 

참고자료

---

• https://stackoverflow.com/questions/995168/textarea-to-resize-based-on-content-length

 

 

 

 

---

질문이나 잘못된 점은 댓글로 남겨주세요 :)💖