[React] 하이픈 ("-") 자동 생성

회사 업무를 하던 도중, 휴대폰 번호를 입력할 때, 하이픈 ("-") 이 자동적으로 입력되게 해달라는 요청을 받았다. 라이브러리를 쓸까도 고민을 해보았지만 이 기능만을 위하여 쓰기에는 라이브러리보다는 직접 함수를 생성하는 게 낫겠다 싶었다.

이 과정에서 개발하는 개발자 입장에서는 귀찮은 일이었지만, 사용자 입장에서 생각을 해보았을 때에는 하이픈이 자동 생성 된다면 상당히 편리하지 않을까라는 생각을 해보았다. 사용자를 위한 일이니 항상 사용자 입장에서 생각을 해보아야한다.

JSX 및 함수

import React, { useState, useRef } from 'react';

const Phone = () => {
  const [num, setNum] = useState('');
  const phoneRef = useRef();

  // 휴대폰 번호 입력 함수
  const handlePhone = (e) => {
    const value = phoneRef.current.value.replace(/\D+/g, "");
    const numberLength = 11;

    let result;
    result = "";  

    for (let i = 0; i < value.length && i < numberLength; i++) {
      switch (i) {
        case 3:
          result += "-";
          break;
        case 7:
          result += "-";
          break;

        default:
          break;
      }

      result += value[i];
    }

    phoneRef.current.value = result;

    setNum(e.target.value); 
  };

  return (

      <div>
        <label htmlFor="user-num">휴대폰 번호</label>
        <input 
          name="user-num" 
          value={num} 
          ref={phoneRef}
          onChange={handlePhone}
          type="tel"
        />
      </div>
  );
};

export default Phone;

결과물

활용

위의 휴대폰 번호 외에도, 함수를 변형하여 원하는 기능으로 충분히 활용이 가능하다.
( 카드유효기간, 주민번호, 생년월일 등등 )

// 카드유효기간 입력 함수 
const handleCardValid = (e) => {
  const value = ref.current.value.replace(/\D+/g, "");
  const numberLength = 4;

  let result;
  result = "";  

  for (let i = 0; i < value.length && i < numberLength; i++) {
    switch (i) {
      case 2:
        result += "/";
        break;
      default:
        break;
    }

    result += value[i];
  }

  ref.current.value = result;

  setCardValid(e.target.value);
};

Input type

추가적으로 input을 사용할 때 요즘에는 사용자들이 웹 보다는, 모바일로 사용하는 경우가 많기 때문에 UX를 고려해주어야 한다.

input type은 기본적으로 text로 되어있기 때문에 키보드 키패드가 나타난다.
만약, 위의 휴대폰 번호만을 입력하기위한 input 이라면 사용자는 숫자키패드로 변경한 다음 휴대폰 번호를 입력할 수 있을 것이다.

이러한 사소한 것에도 사용자들은 불편함을 토로할 수 있기 때문에 미연에 방지를 해주어야 하는 것이 UX를 고려할 줄 아는 프론트엔드 개발자로서의 역할인 것 같다.

따라서 input type을 number, tel로 변경해주어야 사용자가 모바일에서 Input을 눌렀을 때, 숫자 키패드가 나오게 된다.

자세한 Input type은 밑의 글을 확인하자.

https://blog.naver.com/PostView.naver?blogId=besthuman01&logNo=220509888830&redirect=Dlog&widgetTypeCall=true&directAccess=false