React 숫자에 콤마 입력

 

React 숫자에 콤마 입력

숫자 표시의 경우 4자리가 넘어가면 콤마(,)를 찍어주면 읽기가 편하다. 예를 들어 50000원보다는 50,000원으로 표시해 주면 금방 단위를 파악해서 읽을 수 있다. 프로그램에서도 사용자를 위해서 데이터를 출력해 줄 때 가능하면 콤마를 표시해 주는 게 좋다.

 

 

 

---

 

숫자에 콤마입력 예제

위 예제에서는 50000이 입력된 avg 변수의 값에 콤마를 입력해주는 예제이다. TableCell에 들어가는 Typography 컴포넌트에 avg 값을 입력해 주는데 numberWithCommas 함수를 사용해서 50000 값을 50,000으로 변경해 줬다.

// 숫자에 콤마입력 함수
const numberWithCommas = (x) => {
  return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
}

const avg = 50000; // 5만 입력

<TableCell>
	<Typography >{numberWithCommas(avg)}</Typography> // avg 값에 콤마 입력
</TableCell>