전화번호 하이픈(-) 구현하기

1️⃣ 구현 목표

전화번호 입력칸이 있는데 이 부분에서 전화번호의 형식에 맞게 하이픈(-)을 자동으로 넣게 하고 싶었다.

2️⃣구현 코드 및 설명

useEffect(() => {
    if (resumeInfo.phoneNumber?.slice(3) === "-") {
      return setResumeInfo((prev) => ({
        ...prev,
        phoneNumber: prev.phoneNumber.slice(0, 3),
      }));
    } else if (resumeInfo.phoneNumber?.slice(8) === "-") {
      return setResumeInfo((prev) => ({
        ...prev,
        phoneNumber: prev.phoneNumber.slice(0, 8),
      }));
    } else if (resumeInfo.phoneNumber?.length === 4) {
      setResumeInfo((prev) => ({
        ...prev,
        phoneNumber:
          prev.phoneNumber.slice(0, 3) + "-" + prev.phoneNumber.slice(3, 4),
      }));
    } else if (resumeInfo.phoneNumber?.length === 9) {
      setResumeInfo((prev) => ({
        ...prev,
        phoneNumber:
          prev.phoneNumber.slice(0, 8) + "-" + prev.phoneNumber.slice(8, 9),
      }));
    }
  }, [resumeInfo.phoneNumber, setResumeInfo]);

useEffect를 이용해서 이용했다. 입력값의 길이를 감지해서 4이면 slice()함수를 이용해서 3번째 숫자와 4번째 숫자 안에 하이픈을 넣게 구현하였다. 마찬가지로 두번째 하이픈도 같은 방식으로 넣게 만들었다.
그 다음으로 생각할 단계는 이용자가 잘못 숫자를 넣어서 다시 지울 때의 상황이다. 구현함수가 길이를 감지함으로, 이용자가 값을 지울 때 4, 9번째일 때에는 계속 하이픈이 생기는 문제가 있다.
그래서 이 if문들 앞에 새로운 if문을 추가시켰다. 특정 순서의 문자가 하이픈(-)이면, 하이픈 전까지의 입력값으로만 교체하게 만들었다.

3️⃣ outro

더 간단하게 만들 수 있을 거 같지만 지금은 생각이 나지 않는다. 이 글을 읽는 분들 중 더 나은 방법이 있다면.. 알려주세요..!!