[React] 천단위 콤마(,)

화면에 숫자를 표현할때 가독성을 위해서 콤마(,)를 추가해서 표현하는게 좋다.

1000000 => 1,000,000

아래의 코드를 적용하면된다.

Number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")

이름 참고하여 util.js의 함수르 만든다.

util.js

export function commaNumber(number) {
  return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

당연히 예외처리를 해주어야 한다.

1. number 에 문자가 입력될수 있다.
2. number가 빈값일수 있다.

1번의 경우는 일단 넘겨받은 number를 숫자로 바꿔주어야 한다.
2번은 초기값을 지정하고...

export function commaNumber(number = 0) {
  return (number * 1).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

여기서 또한가지 문제가 발생할 가능성이 있다.

react에서

...
return (
	...
	{commaNumber(data?.price * data.count)}
)

이때 data?.price가 접근이 안될경우 NaN으로 표시되는 문제가 발생한다.
isNan() 을 써도 되지만 tilde(~)를 사용하여 처리하는 방법도 존재한다.

export function commaNumber(number = 0) {
  return ~~number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

이상