숫자를 원화 문자열로 수정_Array.prototype.toLocaleString

문제

"info_list": [
      {
        "id": 1,
        "name": "숲과 생활",
        "category": "민박",
        "address": "전라/전주시",
        "min_people": 2,
        "max_people": 3,
        "min_price": 187000,
        "max_price": 264000,
        "image_url": "https://images.stayfolio.com/system/pictures/images/000/058/604/small/632cee6dc35346df1f2c6b5d586ed5e73ec7c8a7.jpg?1606199154"
      },
      ( ... )
      ]

다음과 같이 서버에서 숙박 리스트 데이터를 가져와 화면에 랜더링하고자 했다.

 

이때 키 값 중 min_price와 max_price는 원화로 표시되어야 하기 때문에 해당 value값을 그대로 쓰지 않고 정제해야 하는 작업이 별도로 필요하였다.

 

이를 위해 처음에는 숫자 값을 toString()을 통해 문자열로 바꿔준 뒤에 String.prototpye.split 메서드를 사용하여 각 문자들을 배열 내에 적재해주는 작업을 하였다. 그리고 정해진 위치에 쉼표를 찍기 위해 인덱스를 조회하는 작업을 끝으로 원화로 바꾸는데에 성공하였다.

 

하지만 원화로 바꿔주기 위한 해당 연산 과정이 불필요한 코드를 늘리게 되었고, 결과적으로 화면에 랜더링되는 목적으로만 쓰일 InfoFeed 컴포넌트의 목적이 다소 퇘색되는 문제가 발생하였다.

 

이에 좀 더 좋은 방안을 찾고자 했다.

 

Refactor_Array.prototype.toLocaleString

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

Number.prototype.toLocaleString() - JavaScript | MDN

The toLocaleString() method returns a string with a language-sensitive representation of this number.

toLocaleString 내장 메서드는 인자값에 할당한 언어 표현에 따라 숫자를 문자열로 바꿔주는 메서드이다.

 

현재 본인 프로젝트에서 쓰이는 금액 표현 방식은 원화이기 때문에 'ko-kr'을 사용하여 아래와 같이 코드를 수정하였다.

              <br />
              기준 {info.min_people}명 (최대 {info.max_people})
              <br />
              {`₩${Math.floor(info.min_price).toLocaleString(
                'ko-KR' 
              )} ~ ₩${Math.floor(info.max_price).toLocaleString('ko-KR')}`}
            </InfoAddressContainer>
            
            ( ... )

 

결과화면