주민등록번호 자동 하이픈 넣기, 뒷자리 *로 마스킹 하기

가입 폼을 만들다보면 핸드폰 번호나 주민등록번호에 자동 하이픈이 생기게 해야 할 때가 있다. 열심히 해놨는데 기획 변경으로 이 부분을 다 날려야 하는 일이 생겨 필요한 코드만 정리해놓기로 했다. 정규식을 쓰는 방법이 역시 간편하고 코드도 깔끔하므로 정규식을 썼다.

// 주민등록번호 자동 하이픈
.replace(/[^0-9]/g, '').replace(/^(\d{0,6})(\d{0,7})$/g, '$1-$2').replace(/-{1,2}$/g, ''));
// 사업자등록번호 자동 하이픈
.replace(/[^0-9]/g, '').replace(/^(\d{0,3})(\d{0,2})(\d{0,5})$/g, '$1-$2-$3').replace(/-{1,2}$/g, '');

해당 값 뒤에 replace로 변경해주면 되는데 첫번째 replace는 0-9가 아니면 입력 못하게 막는 것(숫자만 입력 가능), 두번째 replace는 자동 하이픈 넣어주는 것(자릿수를 세서 하이픈 넣어준다), 세번째 replace는 하이픈 개수 제한(1개 이상 2개 미만)이다. 주민등록번호와 사업자등록번호는 두번째 정규식 형태만 달라진다.

.replace(/[^0-9]/g, '').replace(/^(\d{0,3})(\d{0,4})(\d{0,4})$/g, '$1-$2-$3').replace(/-{1,2}$/g, ''));

마찬가지로 핸드폰 번호에 자동 하이픈 넣기는 이렇게 할 수 있다.

다음은 주민등록번호 뒷자리를 마스킹 해주는 방법이다. input에 입력하는 값과 value로 지정해서 보여주는 값을 다르게 할 수 있다는 사실을 몰라서 한참 헤맸었는데, 상태값을 하나 만들어서 거기에 원본값을 복사해서 정규식을 통해서 마스킹 해준 다음 그 값을 value로 넣어주면 되는 간단한 문제였다. 유저에게는 마스킹 된 값이 보여지고, 서버에는 원본값을 전달할 수 있다.

 // 원본 주민번호
      setValue('IdNum', watch('IdNum').replace(/[^0-9]/g, '')
        .replace(/^(\d{0,6})(\d{0,7})$/g, '$1-$2').replace(/-{1,2}$/g, ''));
 // 마스킹 주민번호
      const maskingIdNum = watch('IdNum').replace(/-/g, '').replace(/(\d{6})(\d{1})(\d{6})/, '$1-$2******');
      setMaskingNum(maskingIdNum);

이 코드에서는 react-hook-form이라는 라이브러리를 사용해서 setValue, watch등의 라이브러리 메소드가 나오는데, setValue는 setState, watch는 onChange로 이해하면 될 거 같다. 마스킹 주민번호는 원본 값을 가져오기 때문에 따로 하이픈 추가는 넣어주지 않고 주민번호 뒷자리 첫자리 숫자만 빼고 *로 나올 수 있도록 정규식을 적용해주면 된다.

<Input
      register={{ ...register('IdNum') }}
      placeholder={'9 0 0 1 0 1 - 2 * * * * * *'}
      maxLength={14}
      value={maskingNum}
   />

그리고 마스킹한 주민번호 값을 input의 value로 넣어주면 실시간으로 마스킹 되는 값이 보이면서 원본 값을 따로 저장해둘 수 있다.