리액트 input, textarea 글자수 실시간 표시 + 글자수 제한 + 그 이상 못쓰게 하기 + (byte 실시간 표시)

1. 글자수 실시간 표시 / 글자수 제한

useState로 count 값 바꾸기
input에 maxLength 속성을 쓰면 정해놓은 글자수까지만 써진다.
textarea에도 적용된다.

let [inputCount, setInputCount] = useState(0);

---
  
<Input onChange={onInputHandler} maxLength="10" />
          <p>
            <span>{inputCount}</span> //글자수 표시하는 부분
            <span>/10 자</span>
          </p>

2. 핸들러 함수

const onInputHandler = (e) => {
    setInputCount(e.target.value.length);
  };

value의 length값을 setInputCount에 저장한다

+ 3. byte로 변환해 실시간으로 표시하기

한글 1글자는 3byte, 영어는 1byte다.
setInputCount에 다음과 같이 정규식으로 변환하여 length를 구한다.

const onTextareaHandler = (e) => {
    setInputCount(
    e.target.value.replace(/[\0-\x7f]|([0-\u07ff]|(.))/g, "$&$1$2").length
    );
  };