아이디 입력 정규표현식 적용하기

✨ 배경

정규표현식에 대해 이론적으로만 배우고 넘어갔는데, 실제로 회원가입에 적용해보는 경험은 처음이었다.
아이디 중복 검사는 서버에 요청해서 확인하지만 기본적인 아이디 조건(한글, 영어, 숫자)으로 이루어진 아이디로만 요청을 보낼 수 있도록 구성했다.

✨ 계획

• input value를 정규표현식에 적용
• 정규표현식 통과 시 SuccessMessage 출력
• 정규표현식 불통 시 RequiredMessage 출력

✨ 정규표현식(regex) 검사 만들기

/pattern/flag로 표현하며, test(string) 함수는 인자로 전달된 문자열이 정규표현식의 패턴과 일치하면 true, 그렇지 않으면 false를 리턴한다.

• ^ : 문자열의 시작을 의미
• [ㄱ-ㅎ|가-힣|a-z|A-Z|0-9|] : 한글, 소문자 영어, 대문자 영어, 숫자에 해당하는 문자 1개를 의미
• + : 문자 1개 이상을 의미
• $ : 문자열의 끝을 의미

const onHandleValueChange = (event: ChangeEvent<HTMLInputElement>) => {
    const { value } = event.target; 
    if (inputValidRegEx) { 
      const regex = new RegExp(inputValidRegEx); // 정규표현식 검사 
      if (value === '' || regex.test(value)) {
        setInputText(value);
        setIsSuccess(value !== '' && value !== initialValue); 
      } else {
        setInputText(value);
        setIsSuccess(false);
      }
    } else {
      setInputText(value);
    }
  };

회원가입 아이디에 사용하는 input이 회원정보 수정이나 다른 용도로 사용될 것 같아 컴포넌트화 시켰고, 정규표현식 검사가 필요할 때만 적용될 수 있도록 했다.

✨ 유효성 검사 후 메시지 출력

// SignUp Page
 <CustomInputBox
   initialValue={''}
   onChangeFunction={setNickname}
   placeholderValue={'1자 이상 입력해주세요'}
   required={(nickname === '' && isClicked) || isExists} 
   requiredMessage={nickname === '' ? '1자 이상 입력해주세요.' : errorMessage}
   inputValidRegEx={'^[ㄱ-ㅎ|가-힣|a-z|A-Z|0-9|]+$'}
   successMessage={'멋져요! 사용 가능한 닉네임입니다!'}
/>

회원가입 페이지 내 CustomInputBox 컴포넌트에 아이디로 적합하지 않은 경우(중복 닉네임)를 required로 지정해줬고, 이에 따른 메시지를 서버에서 받아오도록 했다.
successMessage의 경우 서버에서의 중복 닉네임 검사를 통과 후 프론트에서 처리한 정규표현식까지 통과했을 경우 successMessage가 출력되도록 했다.

// CustomInputBox
<S.CustomInput
   value={inputText}
   onChange={onHandleValueChange}
   disabled={disabled}
   placeholder={placeholderValue}
   required={required}
   maxLength={maxLength}
/>
	{required && <S.RequiredMessage>{requiredMessage}</S.RequiredMessage>}
    {isSuccess && !required && <S.SuccessMessage>{successMessage}</S.SuccessMessage>}
    </S.Container>

✨ 결과