react-currency-format 라이브러리 활용하기

카드 번호 입력창

카드 결제를 위해 카드 번호를 입력할 때 우리는 빈칸에 그냥 숫자만 입력하는데 위 그림과 같이 자동으로 4글자 단위로 띄어쓰기가 되는 경우가 있습니다.

 

다른 예로는 쇼핑몰 사이트에서 5000원의 상품을 데이터로 받으면 장바구니에서는 이를 합계에 포함시킬 수도 있고, 또는 5000원이라는 value를 활용하여 다른 형태의 컴포넌트로 나타내고 싶을 수도 있습니다.

 

이 때 react-currency-format 이라는 라이브러리를 사용하면 구현이 편리합니다.

 

터미널에 아래 코드를 입력하면 설치할 수 있습니다. (버전 문제로 설치가 안될 경우 npm 강제설치를 하면 된다고 한다.)

npm install react-currency-format

 

설치가 끝나면 작성하고 있는 코드 맨 윗줄에 라이브러리를 import 시켜줍니다.

import CurrencyFormat from 'react-currency-format';

 

몇 가지 예제들을 통해 여기서 사용할 수 있는 다양한 props를 살펴보겠습니다.

 

예제1)

서두에 설명한 것과 같이 연속된 숫자를 입력하면 이를 띄어쓰기가 포함된 포멧의 형태로 바꾸고 싶을 때 사용할 수 있습니다.

 

format 속성에는 임의의 숫자를 "#"으로 표현하여 형태를 나타내고 그 이상은 표현되지 않습니다.

 

신기한건 중간에 숫자를 지우지 않고 수정할 경우 밀어내기로 수정이 되네요.

 

displaytype을 따로 설정해주지 않을 경우 type="number"인 Input을 바로 렌더링합니다.

import CurrencyFormat from "react-currency-format";

function Test() {
  return (
    <div>
      <CurrencyFormat format="#### #### #### ####" />
    </div>
  );
}

export default Test;

화면 상에 표시되는 UI는 아래와 같습니다.

입력 값: 2235234352226456

---

예제2)

1000000 이라는 숫자를 value 로 받아 $ 1,000,000 으로 나타내고 싶습니다.

그리고 이번엔 그 값을 <div> 안에 넣어주도록 하겠습니다.

import CurrencyFormat from "react-currency-format";

function Test() {
  return (
    <div>
      <CurrencyFormat
        value={1000000} // 포멧형태로 바꿀 값
        displayType={"text"} // text 형태로 바로 반환
        thousandSeparator={true} // 세자릿수 구분 쉼표
        prefix={"$"} // 접두사
        renderText={(value) => <div className="dollar">{value}</div>} 
        // 화살표 함수를 이용해 렌더링이 될 때 value를 사용자가 필요한 형태의 컴포넌트로 반환
      />
    </div>
  );
}

export default Test;

결과

더 다양한 라이브러리 사용 방법은 아래 출처를 참고하시면 되겠습니다.

---

< 출처 >

https://www.npmjs.com/package/react-currency-format

react-currency-format