[React] input 숫자에 콤마 찍어서 나타내는 법

1000 // 원본
1,000 // 숫자에 콤마

숫자에 콤마를 찍어서 나타내는 방법은 크게 두 가지가 있다.
1. 정규식 사용
2. toLocaleString을 사용하기

오늘은 toLoclaeString을 이용해 숫자에 콤마를 찍어서 input창에 보여주는 방법을 소개하겠다.

🌈코드 살펴보기

const [enteredNum, setEnterdNum] = useState<string>("");

<input type="text" value={enteredNum} onChange={changeEnteredNum}>

input 태그에 type이 number가 아니라 text인 이유는 숫자에 콤마를 찍은 값의 타입은 string이기 때문이다.
type을 number로 지정한다면 changeEnteredNum 함수에서 input에 오는 value값을 가져와서 콤마로 찍어서 state값을 변경하여도 반영이 되지 않고 에러가 뜨게 된다.

const changeEnteredNum = (e: ChangeEvent<HTMLInputElement>) => {
    const value: string = e.target.value;
    const removedCommaValue: number = Number(value.replaceAll(",", ""));
    setEnterdNum(removedCommaValue.toLocaleString());
 };

여기서 3번째 라인(removedCommaValue)이 꼭 필요하다.
comma를 제거하고 type을 number로 변경하는 이유에 대해서 설명해 보겠다.

number 타입으로 변경하는 이유는 toLocaleString은 Number의 prototype이기 때문이다.
number로 타입을 변경하기 이전에 콤마를 제거해야 Number()로 타입을 변경할 수 있다. 콤마를 제거하지 않고 Number()로 타입을 변경하려고 하면 NaN가 나오게 될 것이다.

이렇게 하면 우리의 input에 숫자를 입력하면 콤마가 찍어져서 나타나게 된다.

🛴마무리

마지막으로 기억해야 할 두 가지
1. input에 type="text"
2. 반드시 콤마를 제거하고 type을 number로 바꿔서 toLocaleString()을 사용하자!

참고 자료

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
https://mong-blog.tistory.com/entry/input%EC%97%90-%EC%9E%85%EB%A0%A5%EB%90%9C-%EC%88%AB%EC%9E%90%EC%97%90-%EC%BD%A4%EB%A7%88-%EC%B0%8D%EA%B8%B0?category=965256