textarea 자동 높이 조절

프로젝트를 하면서 작성한 코드라서 필요한 부분만 발췌했습니다.

긴 설명글 같은것을 쓸때, 그 글이 얼마나 길어질지 모르기때문에 height을 정할 수 없어서 자동으로 높이가 변경되는 방법을 사용하게 되었다.

처음에 CSS로 textarea의 height를 100% or auto, 감싸는 div도 만들어보고 여러가지 삽질을 했지만, 위와 같은 방법이 먹히질 않는다는걸 알았다. 그래서 JS를 사용해서 자동으로 높이를 조절해주어야한다.

이벤트 발생 순서
1. 인풋을 입력한다.
2. textarea가 높이를 감지한다.
3. 최소 textarea의 높이보다 높으면 늘리고, 그렇지 않으면 다시 최소 높이로 돌아간다.

우선 아래와 같이 일반 textarea를 만든다.

const Textarea = () => {
  return (
    <>
      <textarea
        type="text"
	placeholder={`입력값을 입력해주세요!\n길이는 마음대로입니다.`}
        maxLength="1200"
        className="autoTextarea"
        onKeyDown={autoResizeTextarea}
        onKeyUp={autoResizeTextarea}/>
    </>
  )
}

JS를 사용할때 가장 중요한것은 textarea의 높이를 먼저 알아야한다.
높이 구하는법은 ' scrollHeight '를 사용해야한다.

element.scrollHeight

높이를 자동으로 변경 시키는 로직은 아래와 같다.

const autoResizeTextarea = (e) => {
  let textarea = document.querySelector('.autoTextarea');

  if (textarea) {
    textarea.style.height = 'auto';
    let height = textarea.scrollHeight; // 높이
    textarea.style.height = `${height + 8}px`;
  }
};

이벤트 발생순서와 다르게 textarea.style.height = 'auto';의 코드가 높이 보다 먼저 들어가 있다. 그 이유는 textarea 인풋 높이가 textarea의 최소 높이 보다 작거나 같으면 다시 최소 높이로 돌아오기 위함이다.

다시 위의 로직을 순서대로 적어보면
1. textarea의 높이를 찾는다. 예)120px
2. textarea가 존재하는지 확인한다.
3. textarea의 높이를 auto로 적용시켜 최소 높이로 만든다.(textarea의 순수 높이)
4. textarea의 안 인풋 높이를 찾는다.(3번의 순수 높이와 다르게 인풋의 높이를 찾는다.)
5. textarea의 높이를 textarea의 인풋 높이 + 8px로 만든다.
( textarea의 인풋높이가 300px이면 textarea의 높이는 308px이 될것이고, textarea의 인풋 높이가 100px이면 textarea의 높이를 128px로 만든다.)

최종 코드를 보면 아래와 같다.

const Textarea = () => {
  const autoResizeTextarea = () => {
    let textarea = document.querySelector('.autoTextarea');

    if (textarea) {
      textarea.style.height = 'auto';
      let height = textarea.scrollHeight; // 높이
      textarea.style.height = `${height + 8}px`;
    }
  };
  
  return (
    <>
      <textarea
        type="text"
	placeholder={`입력값을 입력해주세요!\n길이는 마음대로입니다.`}
        maxLength="1200"
        className="autoTextarea"
        onKeyDown={autoResizeTextarea}  // keydown이되엇을때마다 autoResizeTextarea실행
        onKeyUp={autoResizeTextarea} // keyup이되엇을때마다 autoResizeTextarea실행
      />
    </>
  )
}