[React] 정규식으로 핸드폰 번호 input만들기

회원가입을 하다보면 사용자가 입력한 값이 실제 값인지를 구분해야할 필요가 있다. 하여 이번 프로젝트를 진행하면서 핸드폰 번호의 input값을 받아와 값을 받을 때, 값을 확인하고 입력하게 해야했다.

그냥 type='tel'로하면 안되나?

안되는건 아니다. 다만 숫자뿐만이 아닌 일반 문자도 입력이 가능하기 때문에 이런 방법으로는 숫자만 입력할 수 있도록 하고, 문자열의 길이를 조절하는데에도 문제가 있었다.

그럼 type='number'는?

type을 number로 설정하게 되면 문자가 입력되지 않는다는 장점이 있어서 좋다. 하지만 다른 문제가 있다. 숫자 타입이라고 해서 증가와 감소가 함께 있는, 혹은 정말 의도하지 않은 방법으로는 만들고 싶지 않았다.

type='text'로 만들자.

그래서 type을 text로 지정하고 해당 값을 조절하기로 했다. 정규식으로 값을 바꾸고, 사용자에게 보여질 수 있도록 값을 꾸려야했다.

import {useState} from 'react'

const [inputValue, setInputValue] = useState('')

const handleMobile = (e) => {
    const regex = /^[0-9]{0,13}$/
    if (regex.test(e.target.value)) {
      setInputValue(e.target.value)
      setUserInfo({ ...userInfo, mobile: e.target.value })
    }
  }

<input
	type='text'
	value={inputValue}
	onChange={handleMobile}
/>

생각보다 코드는 간단했다. onChange함수를 이용해서 해당 이벤트의 값을 불러오고, inputValue를 useState로 두어 해당 값을 업데이트하면 되겠다.

test()메서드는 주어진 문자열이 정규식을 만족하는지 판별하고 여부를 true, false로 반환한다.

[JavaScript] 정규표현식
[React] 소수점을 포함한 숫자에 1000단위 콤마 찍기