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

Rookie·2022년 3월 26일

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

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);
};