숫자에 콤마 찍기

단순히 받아온 값을 콤마를 찍어서 표현할때

const addComma = (target) => {
  if (target) {
    return target.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  }
};

module.exports = {
  addComma,
};

addComma함수를 따로 만들어두고, 사용해주면 된다.

import { addComma } from "../lib/comma";

	<div className="currency-withdraw-form__point">
  		보유한 포인트 : <span>{addComma(myPoint)}P</span>
	</div>

input태그에 입력하면서 콤마찍기

❓ 위에서 사용한 방법을 통해했더니, 오류가 발생했다.

const [point, setPoint]: any = useState("");

<input
  type="text"
  pattern="\d*"
  value={point}
  onChange={(e) => {
   setPoint(addComma(e.target.value));
  }}
/>

❗ 콤마를 제거한후 콤마를 다시 추가해 주었다.

  const inputFormat = (str: any) => {
    const comma = (str: any) => {
      str = String(str);
      return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, "$1,");
    };
    const uncomma = (str: any) => {
      str = String(str);
      return str.replace(/[^\d]+/g, "");
    };
    return comma(uncomma(str));
  };

<input type="text" pattern="\d*" value={point}
       onChange={(e) => {setPoint(inputPriceFormat(e.target.value));}}
/>