React(79) 숫자 세자리 마다 콤마 붙이기(comma seperator)

 

 

 

입력창에서 기본중의 기본! 숫자입력시 세자리마다 콤마를 붙여보자. 

toLocaleString() 을 붙이면 해결 !

 

....?? 

 

이 안되기도 한다. (우리가 사는 세상은 그렇게 호락호락하지 않다 🥲)

 

숫자를 string 형으로 입력받아야만 하는 경우가 있다.

이럴 때 onChange 메소드 안에서 string → number 로 형변환을 해서 toLocaleString() 을 사용해도

콤마( , ) 가 추가되는 순간 문자열로 인식되기 때문에 제대로 동작을 안하는 이슈가 생겨 버린다. 

이런 경우 내장함수보다는 정규식을 사용하는 것이 더 좋다!

 

그럼 이런 까탈스런 경우를 해결하러 가봅시다

 

 

결과화면 미리보기

이 쉬운 것을 ㅠㅠ 삽질했다니

---

React(79) 숫자 세자리 마다 콤마 붙이기(comma seperator)

여기서 관건은 onChange 이다.

 

onChange 할때마다,

정규식으로 콤마가 찍힌 숫자 를 입력받았는지 체크한 뒤, 

예전에 쓰던 콤마 잠깐 때고, 새로 받은 값에 3자리 수마다 콤마를 새걸로 붙여주자

 

const handleOncahge = ChangeEventHandler<HTMLInputElement> = e => {
  const value = e.target.value;		  // 입력값을 value 라고 선언 
  const numCheck = /^[0-9,]/.test(value); // 입력값이 숫자와 콤마(,)인지 확인 (불린값이 나옴)
    
  if (!numCheck && value) return; // 숫자가 아닌 문자로 이루어져 있으면 pass! (입력이 x)
    
  if (numCheck) { 				// 숫자이면 
    const numValue = value.replaceAll(',', ''); // 잠시 콤마를 때주고
    value = numValue.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); // 받은 값에 3자리수마다 콤마를 추가
  }
  setValue(value); // 바깥에서 사용할 수 있도록 state 값에 세팅해주자
}