[React.js] input box에 1000단위마다 자동으로 comma 넣기

react-number-format npm pakage를 이용하여 쉽게 구현할 수 있다.

 

npm install react-number format

 

예제구현

 - 1000 단위마다 콤마 찍기

import React from 'react';
import NumberFormat from 'react-number-format';
 
function App() {
  return (
    <div>
      <NumberFormat thousandSeparator={true} prefix={'$'} />
    </div>
  );
}
 
export default App;

- 신용카드 넘버 포맷

import React from 'react';
import NumberFormat from 'react-number-format';
 
function App() {
  return (
    <div>
      <NumberFormat format="#### #### #### ####" mask="_" />
    </div>
  );
}
 
export default App;

- 날짜 포맷

import React from 'react';
import NumberFormat from 'react-number-format';
 
function App() {
  return (
    <div>
      <NumberFormat format="##/##/####" placeholder="MM/DD/YYYY" mask={['M', 'M', 'D', 'D', 'Y', 'Y', 'Y', 'Y']} />
    </div>
  );
}
 
export default App;

- 전화번호 포맷

import React from 'react';
import NumberFormat from 'react-number-format';
 
function App() {
  return (
    <div>
      <NumberFormat format="+1 (###) ###-####" allowEmptyFormatting mask="_"/>
    </div>
  );
}
 
export default App;

 

결과물!! 간단하지만 디자인이 매우 구리기 때문에 css 넣어줬다