[리액트 React / React Typescript] 천 단위 콤마(,)넣기 / How to Use Comma(,) as Thousand Separator in React / How to Use Comma(,) as Thousand Separator in JavaScript

안녕하세요.
디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

이번 포스팅에서는 리액트에서 input에 천 단위/천원 단위 콤마(,) 넣는 방법에 대해 공유하겠습니다.
How to Use Comma(,) as Thousand Separator in React.

금액 혹은 포인트를 다룰 때 유용하게 쓰이겠죠?
확실히 콤마(,)가 있으면 숫자를 읽을 때 가독성이 높아집니다.
글 하단에는 리액트 타입스크립트 버전도 준히배놨으니 참고하세요 :)
There is also a React TypeScript version at the bottom of the post.

input에 사용하는 방법을 적어놨지만,
굳이 input이 아니더라도 일반 텍스트에 addComma() 함수를 사용해도 괜찮습니다.

코드를 보기 전에 참고할 내용

- input의 type이 number가 아니라 text인 것에 주의합니다. (콤마가 문자열이기 때문)
- input의 value를 지정할 때 addComma() 함수와 함께 입력합니다.
- input의 value에 빈값("")도 함께 넣어줘야 에러가 나지 않습니다.
- Typescript의 경우, event type인 React.ChangeEvent<HTMLInputElement>를 꼭 넣어줍니다.

React 에서 input에 천원 단위(,) 넣는 방법

import React, {useState} from 'react';

export const Example = () => {
    const [money, setMoney] = useState(0);

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

    const onChangePoints = (e) => {
        const { value } = e.target;
        let str = value.replaceAll(",", "");
        setMoney(str);
    };

    retrun (
        <input
            type="text"
            placeholder="금액 입력"
            onChange={(e) => onChangePoints(e)}
            value={addComma(money) || ""}
        />
    )
}

export default Example;

React Typescript에서 input에 천원 단위 콤마(,) 넣는 방법

import React, {useState} from 'react';

export const Example = () => {
    const [money, setMoney] = useState(0);

    export const addComma = (price: string) => {
        let returnString = price?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return returnString;
    };

    const onChangePoints = (e: React.ChangeEvent<HTMLInputElement>) => {
        const { value } = e.target as HTMLInputElement;
        let str = value.replaceAll(",", "");
        setMoney(str);
    };

    retrun (
        <input
            type="text"
            placeholder="금액 입력"
            onChange={(e) => onChangePoints(e)}
            value={addComma(money) || ""}
        />
    )
}

export default Example;