[React] 통화 화폐 단위 표시하기 - 떽떽대는 개발공부

 

 

페이지를 구현하다 보면 원화, 달러 표기 등을 할 때 단위 별 쉼표 표기가 필요할 때가 있다.

간단하게 아래의 코드를 사용하면 된다.

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

 

이를 이용한 예제를 간단히 만들어 보았다.

import React from 'react';
 
const Test = () => {
    const number = 123456789
 
    return(
        <div>
            {number} 원
        </div>
    )
}
 
export default Test;

위와 같은 코드를 브라우저에 나타내 보면 아래와 같다.

이 코드를 천 단위로 쉼표를 찍어 표시하면 아래와 같다.

import React from 'react';
 
const Test = () => {
    const number = 123456789
    const number2 = number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
 
    return(
        <div>
            {number2} 원
        </div>
    )
}
 
export default Test;

 

위와 같이 적용하면 아래와 같은 결과를 얻을 수 있다.