숫자 세자리 마다 콤마 붙이기
- toLocaleString()
- 정규식
toLocaleString() 메서드를 이용했을 때 오류가 있었다.
input에서 입력받은 value를 onChange를 이용해서 state에 저장하는 방식에 toLocaleString()을 추가해서 사용해보고자 했지만 잘 동작하지 않았다.
<input
value={parseInt(price).toLocaleString()}
onChange={(event) => {
setPrice(event.target.value);
}}
/>처음 시도했던 코드가 위의 코드이다.
toLocaleString() 메서드를 사용하려면 숫자형식에만 사용이 가능하기 때문에
먼저 parseInt() 를 이용해서 입력받은 값을 string에서 number로 형변환을 했다.
그리고 그 값에 toLocaleString()을 하면 1,234이렇게 네자리까지는 문제 없이 콤마를 찍어준다!
하지만 문제는 5자리로 넘어가면 input의 value가 맨 앞자리 수인 1로 바뀌었다.
5자리 이상은 입력할 수 없게 동작했다.
toLocaleString()을 지우면 멀쩡하게 작동했고,
toLocaleString()을 onChange안에 넣으면 NaN값이 나오면서 오류가 발생했다.
그래서 밑에 블로그를 참고해서 정규식 표현으로 코드를 작성했다.
<input
value={price}
onChange={(event) => {
let value = event.target.value;
const numCheck = /^[0-9,]/.test(value);
if (!numCheck && value) {
alert("숫자를 입력하세요");
return;
}
if (numCheck) {
const numValue = value.replaceAll(",", "");
value = numValue.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
setPrice(value);
}}
/>5자리 이상은 입력이 안되던 오류는 해결되었다.
그리고 replace와 replaceAll 메서드를 새롭게 알게 되었다.
replace(교체할 대상, 교체할 형식) 이렇게 이용하면 되는데,
여기서는 numValue의 콤마를 모두 아무것도 없는 것으로 교체하도록 한 것이다.
콤마가 여러개이기 때문에 replaceAll을 이용해야 원하는 값을 얻을 수 있다.
정규식은 이번에 처음 사용했다.
가독성은 좋지 않지만 문자열에서 특정 정보를 찾을 때 유용하다고 한다.
const numCheck = /^[0-9,]/.test(value);위의 코드는
"문자열"이 "정규표현식"과 매칭되면 true, 아니면 false반환하는 test()메서드이다.
해당 코드에서는 0부터 9까지 숫자인지 확인하는 것으로 보면 된다!
하지만 test를 하더라도 숫자를 입력하고, 문자를 입력하면 입력이 된다.아무래도 입력된 값 중에 숫자가 한개만 있어도 true가 반환되는 것 같기도 하다..!
https://devbirdfeet.tistory.com/238
React(79) 숫자 세자리 마다 콤마 붙이기(comma seperator)
입력창에서 기본중의 기본! 숫자입력시 세자리마다 콤마를 붙여보자. toLocaleString() 을 붙이면 해결 ! ....?? 이 안되기도 한다. (우리가 사는 세상은 그렇게 호락호락하지 않다 🥲) 숫자를 string 형
devbirdfeet.tistory.com
📚 JavaScript 정규 표현식 문법 총정리 + 응용 예제
정규 표현식(Regular Expression) 정규식(Regular Expression)은 문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용된다. 대표적으로 입력칸에 전화번호나 이메일을 입력하라고 했을때 옳지 않은
inpa.tistory.com
