const [example, setExample] = useState("");
<input value={example} onChange={(e) => setExample(e.target.value.replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, "$1,"))}/>
<span>{example.replace(/\\B(?<!\\.\\d*)(?=(\\d{3})+(?!\\d))/g, ",")}</span>

React에서는 value 속성만 지정하면 값이 입력되지 않는 현상이 있다.

input 엘리먼트에 value 속성만 지정하면 value 속성으로만 값을 컨트롤 할 수 있는 권한이 있기 때문에 사용자가 값을 입력하는 권한이 없다. ⇒ input 안에 값이 입력되지 않는다.

(React에서 input value 값은 바닐라 자바스크립트와 달리 Read only 속성을 가지고 있다.)

<input value={value} onChange={handleValue} />
<span>{value.replace(/\\B(?<!\\.\\d*)(?=(\\d{3})+(?!\\d))/g, ",")}</span>

다 적혀진 value값에 세자리 수 마다 콤마(,)를 찍는다.

<input value={value.replace(/\\B(?<!\\.\\d*)(?=(\\d{3})+(?!\\d))/g, ",")} onChange={handleValue} />
<span>{value}</span>

value값이 바뀔 때마다 콤마(,)를 찍는다.