React에서 input에 숫자만 찾기, 천의단위로 표시하기

Input에 들어올 값을 숫자만 들어오게 하려고 여러가지 시도를 해봤는데 

  const onChangeHandle = (e)=>{
    if(isNaN(e.target.value)){
      setState(state.price)
      return;
    }
    setState({
      ...state,
      [e.target.name]:e.target.value
    })
  }

이렇게 value값이 숫자열이 아니라면 이라는 조건을 주고 state값을 변경시키지 않게 하려고 하면서 

<commonSt.Input
	type='number'
    placeholder='0'
    name='price'
    value={state.price}
    onChange={onChangeHandle}/>

이렇게 했더니 문자열은 안적히게 잘 되지만 

type기본 기능인 숫자를 업다운 시킬수있는게 나오게되기도 하며 문자열이 아니여서 천의단위로 , 를 넣으려고 했던 toLocaleString()도 쓸 수 없게 됬다.

 

그래서 찾은게 정규식으로 간단하게 표현할 수 있는걸 알게되었다.

 

      .replace(/[^0-9]/g, "") // 숫자만 입력
      .replace(/\B(?=(\d{3})+(?!\d))/g, ",") // 천 단위 콤마 추가

replace로 0~9 숫자가 아닌걸 찾아서 ""빈문자열로 바꿈으로써 숫자만 입력되게 했고

 

천단위로 바꾼건 

\B는 단어 경계가 아닌 위치를 나타내서 문자열 중간에서 일치하는 패턴을 찾는다.

(?=(\d{3})+(?!\d))/g

?=는 긍정형 전방탐색을 나타내며 

?!\d는 숫자가 아닌 문자열을 의미한다. 

따라서 이 정규식은 숫자 세자리마다 일치하는 패턴을 찾되, 숫자 이후에 일치하는 패턴만 찾는다.

마지막으로 /g는 전역 검색을 의미하는데 문자열전체에 일치하는 모든 패턴을 찾는다.

 

천 단위 콤마가 있는 형식을 사용하려면 위 정규식을 알고 있을 필요가 있을 것 같다.

 

마지막으로 

.replace(/^0+/, '')

위 정규식은 입력값의 시작 부분에 있는 0을 모두 찾아서 제거한다.