[React] 단위표시(콤마)가 있는 숫자 계산하기

프로젝트를 만들던중 가격을 입력하는 부분에서 문제점이 발생했다.

1. 천 단위로 콤마를 찍어줄것 

2. 리스트에 있는 가격 합산하기 

 

[1. 천 단위로 콤마를 찍어줄것 ]

이 부분은 처음에 react-currency-input (npm패키지)를 설치해서 자동으로 콤마를 찍어주는 방법을 사용했었다.

하지만 input에 입력할땐 잘 작동을 하는데 리스트로 올라가면 1,0000이런식으로 4자리 뒤에 콤마가 생성되고

console창엔 NaN가 나왔다. 타입문제인가 싶어서 number로 바꿔주었지만 해결되진 않았다.

아무래도 패키지 자체 오류인듯 싶어 정규식 방법을 쓰기로 했다.

아래처럼 함수식으로 만들고 사용을 했다.

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

이부분은 이렇게 해결이 되었으나 다음난관 봉착!

 

[2. 리스트에 있는 가격 합산하기]

리스트에 있는 상품들의 가격들을 배열로 만들고 이를 합산하려 했지만 

콤마가 찍혀있어 스트링타입으로 바뀌어 있었다. ['1' + '1,000'] -> '11,000' 이 되는 상황..

방법을 찾아보니 콤마를 없애고 계산을 하는 방법밖에 없어서 

function stringToPrice(str) {
    return Number(str.replace(/,/g, ""));
}

계산을 할땐 위 함수를 사용해서 콤마를 삭제하고 Number타입으로 변환해주었다.

 

<코드>

    // 천단위 콤마찍기(string타입으로 바뀜)
  function priceToString(price) {
    return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
  // 천단위 콤마없애기(string타입을 number타입으로 변환)
  function stringToPrice(str) {
    return Number(str.replace(/,/g, ""));
}

  //합계 계산
  const totalPrice = () => {
    const sumOfPrice = () => {
      const priceArry = list.map((item) => stringToPrice(item.price))      
      
      return priceArry.reduce((acc, cur)=>{
        return acc + cur;
      }, 0)
    }
    const sumOfshippingFee = () => {
      const shippingFeeArry = list.map((item) => stringToPrice(item.shippingFee))   
          
      return shippingFeeArry.reduce((acc, cur)=>{
        return acc + cur;
      }, 0)
    }

    return `상품가격 ${sumOfPrice()}원 + 배송비 ${sumOfshippingFee()}원 = 총 금액 ${sumOfPrice() + sumOfshippingFee()}원 `
  }