[react]input数字をカンマで表す

1000 // 원본
1,000 // 숫자에 콤마

数字にカンマを付けて表す方法は大きく2つあります.
1.正規表現の使用
2.toLocaleStringの使用
今日は、toLoclaesStringを使用して数字にカンマを付け、inputウィンドウで表示する方法について説明します.

🌈コードの表示

const [enteredNum, setEnterdNum] = useState<string>("");

<input type="text" value={enteredNum} onChange={changeEnteredNum}>

inputラベルのtypeがnumberではなくtextである理由は、数字にカンマを付けた値のタイプがstringであるからです.
typeをnumberとして指定すると、changeEnteredNum関数は入力した値を取得してカンマに加算し、ステータス値を変更してもエラーは反映されません.

const changeEnteredNum = (e: ChangeEvent<HTMLInputElement>) => {
    const value: string = e.target.value;
    const removedCommaValue: number = Number(value.replaceAll(",", ""));
    setEnterdNum(removedCommaValue.toLocaleString());
 };

ここには3本目の線(RemovedCommaValue)が必要です.
カンマを削除し、タイプをnumberに変更する理由を説明します.
numberタイプに変更されたのは、toLocaleStringは numberのプロトタイプであるためです.
タイプをnumber()に変更するには、カンマを削除する必要があります.カンマを削除せずにタイプをNumber()に変更しようとすると、NaNが表示されます.
これにより、私たちのinputに数字を入力すると、カンマが表示されます.

🛴の最後の部分

最後に覚える二つのこと
1.入力時type="text"
2.必ずカンマを外してtypeをnumberに変えてtoLocaleString()を使いましょう!

参考資料

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
https://mong-blog.tistory.com/entry/input%EC%97%90-%EC%9E%85%EB%A0%A5%EB%90%9C-%EC%88%AB%EC%9E%90%EC%97%90-%EC%BD%A4%EB%A7%88-%EC%B0%8D%EA%B8%B0?category=965256