[JavaScript] 숫자만 입력 가능한 정규식 조건 만들기

- 만들고 싶은 기능 -

> text 타입의 input 컴포넌트에 숫자만 입력하도록 하기

 

- 방법 구상하기 -

> input 컴포넌트의 value 에 넣어주는 값을 다른 변수 val와 바인딩해 둔다.
> input 컴포넌트에 onChange 이벤트를 걸어둔다.
> onChange 이벤트 리스너에 조건문 처리를 해준다.
입력한 값이 숫자일 때는 value 와 바인딩해 두었던 변수 val 의 값을 수정하고,
숫자가 아닐 때에는 a 의 값을 수정하지 않고 그대로 둔다.

- 구현하기 -

<Input 
    type={"text"}
    name={"myKey}
    value={myData.myKey}
    onChange={this.onChangeInputNum}
/>

 

onChangeInputNum(e, ele) {
    // 숫자만 포함하는 정규식 생성
    const reg = new RegExp('^\\d+$');
    // 다 지우고 마지막 숫자까지 지우면 그때 value 는 공백 문자열 "" 가 됨.
    // 이 "" 는 정규식에서 숫자로 인식하지 않으므로 정규식 조건을 만족하지 못함.
    // 따라서 숫자를 모두 지웠을 때도 정규식을 만족할 수 있도록 공백 문자열 "" 일 경우 숫자 0으로 바꿔줌.
    const val = ele.value === "" ? 0 : ele.value;
    // value 가 정규식 조건에 부합하는지 확인
    const isNum = reg.test(val);
    // 정규식을 만족한다면? 즉, 숫자라면?
    if(isNum) {
        // value 가 바인딩되어 있는 데이터 객체 myData 에서 "myKey" 의 값을 val 로 업데이트함.
        this.setMyDataProps(ele.name, val);
    }
}

 

 

- 정규식 선언할 때 주의 -

대상에 숫자만 들어 있는지 확인하는 정규식은 아래와 같다.
const reg = /^\d+$/;
위 정규식에서는 "\"가 하나지만
이 식을 정규식 객체로 생성할 때는 아래처럼 "\\" 두 개로 해줘야 한다.
const reg = new RegExp('^\\d+$');
그 이유는 escaping 처리 때문이다.
RegExp() 함수를 보면 정규식 조건을 문자열 형태로 전달해주고 있다.
따라서 문자열 안에서 "\" 부분을 "\\" 처럼 escaping 처리 해주는 것이다.
escaping 처리를 해준 const reg = new RegExp('^\\d+$'); 는 결국 아래와 같다.
const reg = /^\d+$/;    // 숫자 데이터만 들어갈 수 있음.
escaping 처리를 해주지 않은 const reg = new RegExp('^\d+$'); 는 결국 아래와 같은 의미다.
const reg = /^d+$/;     // 문자열 알파벳 "d" 만 들어갈 수 있음.

 

 

- 230224 -