JS(in React) input 가격표시 (3자리 마다 콤마)

하태현·2021년 10월 21일
2

javascript

목록 보기
23/23
import React, { useState } from "react";

export default function App() {
  const [num, setNum] = useState(0);

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

  return (
    <div className="App">
      <input
        type="text"
        value={num}
        onChange={(e) => setNum(inputPriceFormat(e.target.value))}
      />
      <button
        onClick={(e) => {
          // ,를 뺀 원본 숫자 데이터를 얻기 위함
          console.log(num.split(",").reduce((curr, acc) => curr + acc, ""));
        }}
      >
        test
      </button>
    </div>
  );
}

profile
왜?를 생각하며 개발하기, 다양한 프로젝트를 경험하는 것 또한 중요하지만 내가 사용하는 기술이 어떤 배경과 이유에서 만들어진 건지, 코드를 작성할 때에도 이게 최선의 방법인지를 끊임없이 질문하고 고민하자. 이 과정은 앞으로 개발자로 커리어를 쌓아 나갈 때 중요한 발판이 될 것이다.

0개의 댓글