금액 입력 시 자동 콤마 ( 천단위 ) 입력 - toLocaleString()

toLocaleString() 사용하여 금액 입력 시 자동 콤마 ( 천단위 ) 입력하기

사용시 주의사항

1.  <input/> type은 "text"여야 함

2. toLocaleString()은 number타입에 적용가능

3. number로 변환하기 전에 , 를 제거하고 변환해야 함

오류 나는 코드

const [money, setMoney] = useState<string>('');

<input type="text" value ={money} onChange={e=>setMoney(parseInt(e.target.value).toLocaleString())}/>

onChange에 바로 string을 number타입으로 변환하고 toLocaleString()을 적용해주었다.

이 경우에 1000이 넘어가게 입력을 하면 1,000으로 변환되기 때문에 paseInt('1,000') 값은 1 이되고 1을 toLocaleString() 하면 1이다.

1000이상 입력 시 비정상적인 값을 리턴하는 오류가 발생한다.

1000입력 후 0을 더 입력하면 1로 변환된다.

백스페이스로 입력을 지우면 NaN이 되는 오류도 존재한다.

정상 동작 코드

const [money,setMoney] = useState<string>('');

const setCommaMoney = (value:string) => {
    
    let removeComma: string = value.replace(/[^0-9.]/g, '').replaceAll(",", "");
    // 숫자가 아닌 모든 문자 삭제 후 콤마(,)삭제
    setMoney(removeComma && parseInt(removeComma).toLocaleString())
    // removeComman 값이 있을 때만 변환 ( 안해주면 NaN 반환 )
}
    
<input type="text" value ={money} onChange={e=>setCommaMoney(e.target.value)}/>

setCommanMoney라고 함수를 따로 빼내어 콤마를 보여주는 함수를 작성하였다.

받은 입력에서 정규식을 통해 /[^0-9.]/g (숫자가 아닌 문자) 를 ''로 변환하고 ,를 ''로 변환하는 작업을 해준 후

변환한 값을 number타입으로 변환 후 toLocalString()을 적용해준다.

이 때 removeComma 값이 있는지 없는지 체크를 안하면 parseInt()가 NaN을 반환하기 때문에 removeComma&&로 값이 있을 때만 parseInt()를 적용해주자.