프로젝트를 하던 중 input을 컴포넌트를 제작하고 있었고 글자 수를 제한하기 위해 maxlength의 값을 props로 받았는데 type이 text 면 적용이 되는데 number 면 안된다고 하더라...
찾아보니까 이런 경우 말고 한글은 maxlength를 초과해서 한자리까지 더 쳐지는데 이유는
한글과 영어의 byte 차이 때문에 일어나는 현상이라고 한다.
한글은 2byte 영어는 1byte 로 표현하기 때문에
그래서
const handleMaxLength = (e) => {
if (e.target.value.length < maxLength + 1) {
onChange(e)
} else {
return
}
}
라는 함수를 만들어서 해결했다.