세자리(천단위)마다 콤마 toLocaleString() / 사용시 number Type setState 오류 / 숫자만 남기는 함수

toLocaleString()

3자리마다 숫자를 끊어 콤마를 삽입하여 문자열로 반환하는 역할을 한다.

인자로 들어온 지역 값에 따른 숫자 표기 방식을 적용하며 'en'은 영어권 국가의 숫가 표기 방식을 사용하겠다는 것을 지정한다.

 

number type setState 오류

돈을 입력하고 이를 set해주는 기능 구현할 때 1,000 이상으로 넘어가면 값이 입력이 안되고 NaN이 뜨는 에러가 발생했다.

[charge,setCharge] = useState<number>(0);

...

<input type="text" placeholder="금액을 입력해주세요."
	value={charge.toLocaleString()} 
	onChange={e => setCharge(Number(e.target.value))} />
    
...

 

1000을 입력하면 toLocaleString()에 의해 1,000으로 변한다.

1,000을 Number()로 변환하니 NaN이라는 값이 되어 입력이 안되었다.

해결방법 - 숫자만 남기는 함수

const leaveOnlyNumber = (val: string) => {
    let regex = /[^0-9]/g; // 숫자가 아닌 문자열을 매칭하는 정규식
    let result = val.replace(regex, ""); // 원래 문자열에서 숫자가 아닌 모든 문자열을 빈 문자로 변경
    return result;
};

숫자가 아닌 문자열을 제외하여 숫자만 남기는 함수를 만들었다.

아래 코드와 같이 Number() 로 변환하기 전에 문자열에 숫자만 남기고 적용해주면 된다.

<input type="text" placeholder="금액을 입력해주세요."
	value={charge.toLocaleString()} 
	onChange={e => setCharge(Number(leaveOnlyNumber(e.target.value)))} />