🛠️ textArea 태그 줄 수 제한

📌 문제 상황

2023.09.01 ~ 2023.09.27 동안 진행했던 앙골라 프로젝트에서 포스트 작성을 위해 textArea 태그를 사용해야 하는 상황이 있었다. textArea 태그 내에서 사용자가 텍스트를 입력하면 이 내용을 바탕으로 포스트가 작성된다.

이 텍스트의 내용을 시각적으로 한 눈에 파악할 수 있도록 하기 위해, 사용자가 텍스트를 입력하더라도 textArea 태그 내에 스크롤이 생기지 않았으면 했다. 그래서 textArea 내의 텍스트 내용을 5줄로 제한하고 싶었다.

---

📌 해결 과정

이를 위해 다양한 방법을 시도했다.

1. textArea의 rows 속성을 5로 설정

첫번째로 시도했던 방법은 textArea 요소의 rows 속성을 사용하는 방법이었다. 이 rows 속성은 textArea내의 가시적인 height을 설정할 수 있는 속성이지만, 요소의 height이 css로 정해져있는 상태에서는 이 rows 속성이 적용되지 않았다. 그래서 나의 의도대로 동작하지 않았기에 다른 방법을 생각해보았다.

2. 입력된 text 안에 개행문자 /n가 4개 들어있으면 5줄 이상이라고 판단

textArea 내의 텍스트가 5줄이라는 것은 사용자가 엔터를 4번 입력했을 것이라고 판단해, 입력된 text인 string 값에서 개행 문자 /n의 개수를 판단해, 이 개수가 4개 이상이라면 더 이상 입력하지 못하도록 해주면 되겠다고 생각했다. 구글에 검색해보았을 때도, 이러한 방법으로 문제를 해결한 사례가 많았고 이와 관련된 함수 코드들도 많이 공유되고 있었다.

하지만 좀 더 곰곰이 생각해보니, 현재 프로젝트 내 textArea 요소는 고정적인 width가 정해져있는 상태이고, 엔터를 입력하지 않아도 입력된 text의 길이가 길면 textArea 내에서 자동줄바꿈(\n은 없지만 줄바꿈이 되어서 2줄이 됨)이 되기 때문에 이렇게 판단할 수는 없겠다고 생각했다.

3. Element.scrollHeight 속성 사용

여러가지 방법을 찾아보다 Element.scrollHeight 이라는 속성을 알게 되었다.

Element.scrollHeight

위의 그림에서 볼 수 있듯이, HTML element의 너비와 높이를 나타내는 속성은 여러가지가 있고, 이 중 높이를 나타내는 속성 중 clientHeight과 scrollHeight이 있다.

• clientHeight

  => border, scrollBar를 제외한 실제 내부 컨텐츠가 차지하는 크기를 나타낸다. 즉, 요소 내의 스크롤이 되는 컨텐츠가 있더라도, 실제로 눈에 보이는 영역의 높이를 나타낸다.

• Element.scrollHeight

  => 화면에서 보이는 영역과 상관없이, 실제 엘리먼트의 높이를 나타낸다. 즉, 요소 내의 스크롤이 되는 컨텐츠가 있다면 그 컨텐츠의 높이까지 다 나타내주는 속성이다.

• 만약 요소의 콘텐츠가 스크롤바 없이 모두 보이는 경우, 요소의 scrollHeight와 clientHeight은 동일하다.

HTML 요소의 크기 속성에 대한 더 자세한 내용은 여기를 참고했다.

이러한 내용을 바탕으로, 결국 사용자의 텍스트 입력이 많아져 요소 안에 스크롤이 생길 경우 요소의 scrollHeight 값이 변하게 된다는 사실을 알게되었다.

그래서 textArea 요소의 height을 텍스트가 5줄 입력될 때까지는 스크롤이 생기지 않고, 6줄을 입력했을 때 스크롤이 생길 정도의 특정 값(ex) 256px) 로 지정해놓고, 텍스트 입력 시 textArea의 scrollHeight이 변한다면, 그 입력은 6줄 이상의 입력이기 때문에 적용되지 않도록 하면 되겠다고 생각했다.

그래서 처음엔 다음과 같이 요소의 scrollHeight 값이 변하지 않을 때만 입력이 가능해도록 해주었다.

const MAX_OPTION_SCROLL_HEIGHT = 252;

const handleChangeOptionValues = (e: ChangeEvent<HTMLTextAreaElement>) => {
    const { id, value } = e.target;
    if (e.target.scrollHeight === MAX_OPTION_SCROLL_HEIGHT) { 
        // scrollHeight이 변하지 않을 때만 입력 가능
        setInputValues({
        ...inputValues,
        [id]: value.substring(0, MAX_TITLE_OPTION_LENGTH),
      	});
    } 
  };

하지만 좀 더 생각해보니, 스크롤이 생기기 전에는 요소의 clientHeight 값과 scrollHeight 값이 같을 것이고 스크롤이 생길 때 이 값이 서로 달라질 것이기 때문에, 굳이 상수값인 const MAX_OPTION_SCROLL_HEIGHT = 252;을 선언해 비교하지 않고 clientHeight 값과 scrollHeight을 비교하도록 로직을 변경했다. 그리고 하위 함수를 textArea의 onChange 이벤트 핸들러로 연결해주었다.

const handleChangeOptionValues = (e: ChangeEvent<HTMLTextAreaElement>) => {
  const { id, value } = e.target;
  if (e.target.scrollHeight === e.target.clientHeight) {
    setInputValues({
      ...inputValues,
      [id]: value.substring(0, MAX_INPUT_LENGTH),
    });
  }
};

lineHeight 속성 설정

그리고 textArea 내에 5줄이 같은 간격으로 배치되도록 하기 위해 요소의 height인 212를 5로 나눈 42 값을 line-height 값으로 설정해주었다.

const OptionInput = styled.textarea`
	line-height: 42px;
`;

word-break, overflow 속성 설정

clientHeight 값과 scrollHeight을 비교해 5줄로 제한을 해주었지만, 이렇게 숫자를 계속 입력하면 한글자 혹은 두 글자 정도는 다음 줄로 내려오는 버그가 발생했다. 그래서, 추가로 css 속성인 word-break과 overflow 값을 설정해주어 이러한 부분을 보이지 않도록 설정해주었다.

const OptionInput = styled.textarea`
  word-break: break-all;
  overflow: hidden;
`;

---

📌 결과 및 정리

따라서 textArea 요소 내 줄 수를 제한하기 위해서 다음과 같은 방법을 적용했다.

1. 몇 줄 제한할 건지 먼저 결정 => n줄

2. 원하는 요소의 높이를 설정하고, lineHeight을 요소의 높이 / n 값으로 설정

   ⇒ n개 줄 이상 입력 시 스크롤이 생길 것임

3. 요소의 clientHeight 값과 scrollHeight 값이 같을 때만 요소의 내용이 변경되도록 해주기

   const handleChangeOptionValues = (e: ChangeEvent<HTMLTextAreaElement>) => {
     const { id, value } = e.target;
     if (e.target.scrollHeight === e.target.clientHeight) {
         // 요소의 내용 변경
     }
   };

4. 그래도 가끔 한 두 글자는 밑으로 내려가므로 해당 요소의 css에 두 속성 써주기

   word-break: break-all;
   overflow: hidden;