[React] 왜 반응형 텍스트박스는 스타일로 만드는가?

🐾들어가며

반응형 텍스트박스란?

• 사용자의 입력에 따라서 크기가 자동 조절되는 텍스트 박스. 엑셀의 셀 하나를 생각해보면 된다.
• 화면의 크기에 따라서 비율이 자동 조절되는 텍스트 박스.

보통 위의 두 가지를 모두 해결할 수 있는 방법이 바로 스타일로 조절하는 방법입니다.

그러나 여기에서 궁금증이 생겼습니다.
textarea의 기본 속성 중 rows와 cols가 있는데, 보통 이것으로 크기를 조절할 수도 있습니다.
스타일로 조절할 경우 최초 선언한 rows와 cols가 바뀌지 않습니다.

그렇다면 cols와 rows로 반응형을 하지 않는 것일까?

궁금해서 직접 구현해보았습니다!!

✨본격적으로

✅cols = 1 이 의미하는 것

• cols는 가로의 크기를 결정합니다.
• cols는 숫자를 값으로 받습니다.
  그렇다면 cols=1이 의미하는 것은 무엇일까요?

바로, 1byte입니다. 넵... 사실 여기에서 멈췄어야 한다.

여기에서 등장하는 글자의 byte 개념..! 이미 어느 정도 들어서 알고 있지만, 한글의 경우 하나의 모음, 자음 당 2byte, 숫자, 특수문자, 영어는 1byte를 차지합니다. 즉, 한글과 영어를 입력할 때의 cols가 늘어나는 정도가 다르다는 것입니다. 한글로 입력해도, 숫자와 특수문자의 경우가 있으니 입력받는 언어를 한글로 통일하는 것도 힘듭니다. (참고로 엔터를 칠 때도 1byte가 필요)

아, 다행히 rows는 줄 수라고 생각하시면 됩니다...

-> cols를 조절하기 위해선 입력받은 값의 byte를 알아야 한다.

  const getByteOfValue = (str: string) => {
    let byte = 0;
    for (let i = 0; i < str.length; i++) {
      // 기본 한글 2바이트 처리
      str.charCodeAt(i) > 128 ? (byte += 2) : byte++;
    }
    return byte;
  };

✅textarea에서 마지막으로 입력한 글자

textarea를 리액트에서 만들 때 데이터 바인딩을 위해 다음과 같이 사용합니다.

import { FormEventHandler, useState } from 'react';
import styles from './Textarea.module.scss';

const Textarea = ({ ...props }: React.HTMLProps<HTMLTextAreaElement>) => {
  const [value, setValue] = useState('');
  const onChangeTextarea: FormEventHandler<HTMLTextAreaElement> = event => {
    const elem = event.target as HTMLTextAreaElement;
    setValue(elem.value);
  };
  return (
    <textarea
      value={value}
      onChange={onChangeTextarea}
      className={styles.textarea}
      {...props}
    />
  );
};

export default Textarea;

그렇다면 value의 값에는 어떤 게 들어올까요?

사용자의 입력: "hello" / value: "hello"
사용자의 입력: "hello ㅅ" / value: "hello ㅅ"
사용자의 입력: "hello 세" / value: "hello 세"

그렇습니다. value는 여태까지 입력했던 모든 글자를 가져옵니다.

그렇다면 마지막으로 입력한 글자는 value[vlaue.length - 1]입니다. 위의 예시에서는 "o", "ㅅ", "세"가 됩니다.
그리고 세상에나... 첫번째와 두번째는 총 글자수가 바뀌었습니다. 그러나, 두번째와 세번째는 글자수가 똑같군요.
'ㅅ'과 'ㅔ' 모두 한글이라서 cols에 그대로 2byte씩 더해주는 것이 아닌 'ㅅ'을 입력했을 때 2를 더해주고, 'ㅔ'를 입력했을 때 총 글자 수가 바뀌지 않았으니 더해야 한다면 0을 해야 됩니다.

-> 글자 수의 변동에 따라 cols에 얼마의 byte를 더해야 하는지 결정해야 한다.

• 글자 수가 바뀌었는 지 확인하는 함수

  //이전 길이 저장
  const [prevInputLength, setPrevInputLength] = useState(0);
  //입력받은 value의 길이(현재 길이)와 이전 길이 비교
  const checkIncreasingValueByte = (value: string) => {
    const inputTextLength = value.length;
    const hasIncreasedValue = prevInputLength <= inputTextLength - 1;
    setPrevInputLength(inputTextLength);
    //길이가 늘었다면 true 아니라면 false
    return hasIncreasedValue;
  };

• 입력한 글자의 byte를 계산하는 함수

  //이전에 계산한 byte 저장
  const [prevByte, setPrevByte] = useState(0);
  //이전에 계산한 byte와 입력받은 str의 byte를 비교
  const getGapOfBytes = (str: string) => {
  //전체 byte 계산
    const byte = getByteOfValue(str);
    let returnValue = 1;
    //1byte의 차이라면 1을 반환
    if (byte - prevByte === 1) returnValue = 1;
    //아니라면 2를 반환
    else returnValue = 2;
    //계산한 byte 저장
    setPrevByte(byte);
    return returnValue;
  };

즉, 만약 글자 수가 증가했다면, 이전 글자의 총 byte와 현재 글자의 총 byte를 계산하여 그 차이만큼만 cols에 더해줘야 합니다.

if(checkIncreasingValueByte()) cols += getGapOfBytes(value);

여기에서 왜 checkIncreasingValueByte인데 getGapOfBytes를 사용하지 않았을까요?
getGapOfBytes 함수는 getByteOfValue의 함수에 의존합니다. 그리고 getByteOfValue의 내부에는 전체 글자를 돌면서 byte를 계산합니다. 차라리 length를 이용해서 단순하게 계산하는 편이 더 빠르기 때문입니다. (사실 글 적다가 발견함) 이 글처럼 긴 글을 적는다고 했을 때 모든 글자수를 다시 계산하는 것보다 성능이 더 좋습니다!

✅가로(horizontal) 반응형 텍스트박스

• rows: 세로 높이는 고정입니다. 세로 길이를 값으로 받아야 합니다.
• maxCols: 최대 가로 길이를 받을 수 있습니다.
• cols: 최소 가로 길이를 받을 수 있습니다.

반응형을 할 때 고려할 점은 최댓값과 최솟값 사이에서 자유롭게 날아?다녀야 한다는 점입니다. 그래서 다음과 같이 최솟값과 최댓값의 범위 내에 있는지, 넘지는 않았는지 확인할 수 있는 변수들을 만들었습니다.

cols와 maxCols의 경우 값이 없을 수도 있습니다. 무한대로 가로 길이가 늘어날 수 있을 수도 있지 않을까요?

  const isOverMinCols = !!cols && cols <= currentCols;
  const isUnderMaxCols = !!maxCols && currentCols <= maxCols;
  const isOverMaxCols = !maxCols || !isUnderMaxCols;
  const isValidHorizontal = horizontal && (isUnderMaxCols || isOverMinCols) && !isOverMaxCols;

이제 이 친구들을 렌더링될 때마다 확인을 해줄 겁니다. 물론 입력받는 value가 바뀔 때마다 렌더링 되지만, 이 친구들은 현재 cols의 값에 의존해야 합니다. 그래서 현재 cols(currentCols)를 상태로 만들어주고, textarea의 cols에 값으로 넘겨줍니다.

  const [currentCols, setCurrentCols] = useState(cols ?? 1);
/** 생략 */
 <textarea
      value={value}
      ref={textarea}
      className={styles.textarea}
      onChange={handleChangeTextarea}
      onKeyUp={handleKeyEnter}
      cols={currentCols}
      rows={currentRows}
      {...props}
    />

cols는 기본값으로 1이 들어갑니다. cols 값이 없을 수도 있고, 커서를 볼 수 있는 최소 크기는 되어야 하니까요.

이제 값도 받았고, 범위도 설정했으니 입력이 바뀔 때마다 cols를 업데이트 해줄 일만 남았습니다. value를 바인딩 해주는 handleChangeTextarea의 함수에서 같이 처리해주어도 되지만, value가 바뀜에 따라 cols를 업데이트하는 부수 효과라고 생각해서 useEffect로 관리해줍니다.

  useEffect(() => {
    if (!textarea.current) return;
    const elem = textarea.current as HTMLTextAreaElement;
    updateCountOfTextAfterEnter(value); //이 친구는 무엇일까?
    const isOverCurrentCols = checkOverCurrentCols();

    if (isValidHorizontal) {
      elem.cols = isOverCurrentCols ? countOfTextAfterEnter : currentCols;
    }
    setCurrentCols(elem.cols);
  }, [value]);

여기에서 저 updateCountOfTextAfterEnter라는 함수와 이름이 비슷한 countOfTextAfterEnter라는 친구가 새롭습니다.

여기에서 위의 내용이 다시 등장합니다. cols의 값은 글자의 byte값이다...

  //현재 입력한 텍스트의 길이. 엔터를 기준으로 나눔. 칸이 모자라서 줄바꿈 되는 경우가 아님!
  const [countOfTextAfterEnter, setCountOfTextAfterEnter] = useState(0);

  const updateCountOfTextAfterEnter = (value: string) => {
    const inputLanguageByte = getGapOfBytes(value);
    //전체 글자 수에 변동이 있다면, 변동된 byte 수만큼 더하기. 없다면 0을 더하기.
    const countOfText = checkIncreasingValueByte(value) ? inputLanguageByte : 0;
    setCountOfTextAfterEnter(prev => prev + countOfText);
  };

현재 입력한 글자의 수가 바뀌는 것을 알아야 cols를 변경할 수 있습니다. 그러니 현재 입력한 글자를 확인하고 글자 수가 증가했다면 증가한 byte 만큼 더해주고, 아니라면 0만큼 더해주었습니다. 글자를 지웠다면 음수를 주기 때문입니다.

자, 이렇게 끝인 줄 알았죠..? 😈

만약 cols가 기본 20으로 설정되었다면 어떻게 될까요? 현재는 글자를 입력할 때마다 cols가 증가합니다. 즉, 기본으로 설정한 20에 더 추가를 하고 있는 것이죠. 그러니, 20을 다 채울 때까진 움직이면 안됩니다.

  useEffect(() => {
    if (!textarea.current) return;
    const elem = textarea.current as HTMLTextAreaElement;
    updateCountOfTextAfterEnter(value);
    const isOverCurrentCols = checkOverCurrentCols();
    //현재 cols가 글자로 다 찼는지 알려줘! 
    const isPullCurrentCols = elem.cols === currentCols;
    if (isValidHorizontal && isPullCurrentCols) {
      elem.cols = isOverCurrentCols ? countOfTextAfterEnter : currentCols;
    }
    setCurrentCols(elem.cols);
  }, [value]);

이렇게 조건을 하나 추가해서 드디어!! 가로 반응형 텍스트박스를 만들었습니다...ㅎㅎ

추가적으로 enter 키를 누를 때마다 현재 cols가 바뀔 수 있습니다. 텍스트의 중간에서 엔터를 친 경우가 있죠.
그래서 enter 키를 누른다면 먼저, 다시 현재 가진 최대 cols가 얼만지 알아봐야 합니다.

  const handleKeyEnter: React.KeyboardEventHandler<HTMLTextAreaElement> = event => {
    if (event.key === 'Enter') {
      if (isValidHorizontal) {
      //여기에서 일단 엔터를 했으니 현재 입력한 값을 초기화.. 여기에서 많은 todo가 생략됨..
        setCountOfTextAfterEnter(0);
        //enter를 텍스트 중간에서 했을 경우 currentMacCols가 달라질 수 있다.
        const currentMaxCols = calcMaxColsByte(value);
        setCurrentCols(currentMaxCols);
      }
  };

   const calcMaxColsByte = useMemo(
    () => (value: string) => {
    //엔터와 엔터 사이에 있는 글자들을 엔터를 기준으로 잘라서 배열에 저장
      const ArrayOfBetweenEnterValues = splitByEnter(value); //value.split(엔터 골라내는 정규표현식)
      //해당 글자들의 길이를 배열에 저장
      const ArrayOfLength = ArrayOfBetweenEnterValues.map(
        values => +values.length
      );
      //가장 긴 글자의 길이를 저장
      const maxLengthOfValues = Math.max(...ArrayOfLength);
      //위의 길이의 인덱스 === 가장 긴 글자의 인덱스
      const indexOfMaxLength = ArrayOfLength.indexOf(maxLengthOfValues);
      //가장 긴 글자의 byte를 계산하여 return
      return getByteOfValue(ArrayOfBetweenEnterValues[indexOfMaxLength]);
    }, [value] );

많은 todo 들이 있겠지만 일단 구실은 한다! 정도로 만들어 본 가로 반응형 텍스트 박스 코드 설명은 여기까지입니다! 세로 반응형과 양반응형 텍스트 박스의 경우 아래 코드를 링크로 남깁니다.
https://gist.github.com/Sleepingoff/879d368e87bb7e5f29585ab39561edd9

혹시... 여기에서 더 하고 싶은 분들을 위해 알려드리는 남은 todo들...을 빙자한 단점 대방출
[ ] 최댓값까지 모두 찬 텍스트 박스에 스크롤 보이게 하기
[ ] 글자를 지웠을 때 cols혹은 rows에 대한 처리
[ ] 최댓값까지 모두 채웠지만 글자를 지워 다시 범위 내로 들어왔을 경우에 대한 처리
[ ] width 100% 등 상대 단위에 대한 대응(적응형)... cols는 byte값인데.. 변환 어떻게 해...
[ ] vertical, horizontal을 모두 입력하지 않았을 때 에러처리
[ ] 엔터 정규표현식에 걸리는 사용자의 입력 처리
[ ] 매우 많은 useState 정리

✔️결론

하지 않는 거에는 이유가 있다.
근데 하면 또 재미있습니다. 시험 기간에 딴짓하는 느낌이라서 집중이 잘 되었네요ㅎㅎ