[React] 휴대전화 자동 하이푼(-)

회원가입 페이지를 구현하는데 휴대폰 번호를 입력받아야 했다.

010-1234-5678 형식으로 자동으로 하이푼(-)이 생성될 수 있도록 하고싶었다.

이를 위해 input 태그의 onChange이벤트를 통하여 handlePhone함수를 호출하였고

handlePhone 함수에서 검사를 통해 state를 업데이트 하였다.

const [phone, setPhone] = useState('');

const handlePhone = (value: string) => {
    const onlyNumber = value.replace(/\D+/g, '');
    const numberLength = 11;
    
    let result = "";
    for(let i=0; i<onlyNumber.length && i < numberLength; i++){
      switch (i) {
        case 3:
          result += "-";
          break;
        case 7:
          result += "-";
          break;

        default:
          break;
      }
      result += onlyNumber[i];
    }
    setPhone(result);
 }
  
const onChangehandler = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    handlePhone(e.target.value);
}, [phone]);

<input
  type="tel"
  value={phone} 
  name="phoneNumber"
  onChange={onChangehandler}
></input>

결과