필수입력 & 자동 하이픈 넣기

⭐필수 입력창 입력 확인하기

제출 신청서폼을 만들때 필수 입력칸을 모두 채워야 제출이 가능하게 <input/>을 제어해야했다.

  const [required, setRequired] = useState(true);

  function check() {
    const requiredInput :any = document.querySelectorAll(".requiredInput");

    counting();
    for (let i = 0; i < requiredInput.length; i++) {
      if (
        requiredInput[i].value !== undefined &&
        requiredInput[i].value.length >= 1
      ) {
        if (i === requiredInput.length - 1) {
          setRequired(false);
        }
        continue;
      } else {
        setRequired(true);
        break;
      }
    }
  }

 <input type="text" className="requiredInput" onKeyUp={() => check()} />

⭐ 하이픈 넣기

  const [phone, setPhone] = useState("");
  const phoneRef: any = useRef();

  function handlePhone(e: any) {
    const phone = phoneRef.current.value.replace(/\D+/g, "");
    const phoneLength = 11;

    let result = "";
    for (let i = 0; i < phone.length && i < phoneLength; i++) {
      switch (i) {
        case 3:
          result += "-";
          break;
        case 7:
          result += "-";
          break;
        default:
          break;
      }
      result += phone[i];
    }
    phoneRef.current.value = result;
    setPhone(e.target.value);
  }

<input type="text" maxLength={13} onChange={handlePhone} ref={phoneRef} />