[React Native] 회원 가입 시 이메일 유효성 검사 및 검증 여부에 따른 메세지 보여주기

오늘은 위 사진과 같이 총 4가지를 개발해 보았다.

1. 이메일 유효성 검증

2. 검증 여부에 따른 메세지 , 메세지 색상 및 아이콘 표시

3. 이메일 유효성 검증이 완료되어야 버튼 활성화

4. 이메일 중복 확인 및 중복 확인에 따른 메세지, 메세지 색상 및 아이콘 표시

 

 

1. 이메일 유효성 검사 및 메세지 저장을 위한 state를 작성한다. 

// 입력 받는 이메일 저장 
const [email, setEmail] = useState('');

// text input이 눌렸는지
const [EmailisPress, setEmailIsPress] = useState(false);

// 이메일 validation 검증 
const [isEmailCheck, setIsEmailCheck] = useState(false);

// 이메일 유효성 검증 여부에 따른 메세지 저장
const [emailMessage, setEmailMessage] = useState('');

// 이메일 중복 여부 검증
const [isDuplication, setIsDuplication] = useState(false);

// 이메일 input editable을 위한 state
const [finalEmailCheck, setFinalEmailCheck] = useState(false);

 

2. 이메일을  입력받아 유효성 검증을 하는  함수를 작성한다.

const onChangeEmail = (text) => {
	//prop으로 받은 text를 email로 저장
    setEmail(text);
    
    //이메일 유효성 검증 코드
    const emailRegExp =
      /^[A-Za-z0-9_]+[A-Za-z0-9]*[@]{1}[A-Za-z0-9]+[A-Za-z0-9]*[.]{1}[A-Za-z]{1,3}$/;

	//이메일 유효성 검증 여부에 따른 메세지 저장 및 
    if (!emailRegExp.test(text)) {
      setEmailMessage('올바른 이메일 형식을 입력해주세요.');
      setIsEmailCheck(false);
    } else {
      setEmailMessage('이메일 형식이 맞습니다');
      setIsEmailCheck(true);
    }
  };

 

emailRegExp : 이메일 유효성 검증 코드

함수 안에 이메일 검증 여부에 따른 State를 저장하고 추후에 보여주기 위한 메세지를 저장한다. 

 

3. 작성한 함수를  input에 적용한다.

<EmailInput
      //자동 교정 기능 비활성화
      autoCorrect={false}
      //맞춤법 기능 비활성화
      spellCheck={false}
      //자동 대문자화 비활성화 
      autoCapitalize="none"
      //화면이 로드되면 자동으로 TextInput으로 포커싱
      autoFocus
      //키보드의 리턴 버튼의 동작 설정 next: 다른 입력 필드로 이동 
      returnKeyType="next"
      //이메일 키보드 입력 모드 설정
      inputMode="email"
      //입력 필드의 힌트
      placeholder="이메일@naver.com"
      //힌트 색상
      placeholderTextColor="#ced4da"

      value={email}
      //작성한 함수 사용
      onChangeText={onChangeEmail}
      //입력 필드에 포커스 될때 호출하는 함수
      onFocus={() => {
        setEmailIsPress(true);
      }}
      //입력 필드에서 아웃포커스 될때 호출하는 함수
      onBlur={() => {
        setEmailIsPress(false);
      }}
      //이메일 최종 확인 시 편집할 수 없도록 설정
      editable={finalEmailCheck ? false : true}
    >
</EmailInput>

 

코드가 길기 때문에 주석으로 설명하겠다. 

 

onChangeText 옵션에 사전에 구현한 onChangeEmail 함수를 호출한다. 

이메일 TextInput에 텍스트가 입력될 때 그 텍스트를 onChangeEmail 함수가 Prop으로 받아 사전에 정의한 email에 저장한다.

그 후 이메일 유효성을 검증하고 검증이 된 경우 IsEmailCheck를 true로 지정, '이메일 형식이 맞습니다'라는 메세지가 나타나도록 메세지를 저장한다.

반대로 유효성 검증이 되지 않은 경우 IsEmailCheck를  false로 지정, '올바른 이메일 형식을 입력해 주세요.'라는 메세지가 나타나도록 메세지를 저장한다. 

 

4. 이메일 중복을 검사하는 함수를 작성한다.

이메일 유효성 검증 부분 구현이 완료됐다. 이제는 중복 버튼을 누른 경우에 중복 여부를 체크하는 함수를 구현할 차례이다.

const CheckEmail = () => {
	//기존 가입되어 있는 이메일과 중복된 경우
    if (email == TestEmail) {
      setEmailMessage('이미 사용하고 있는 이메일이에요.');
      setIsDuplication(true);
    } 
    //이메일이 중복되지 않은 경우
    else {
      setEmailMessage('사용할 수 있는 이메일이에요.');
      setIsDuplication(false);
      setIsEmailVerifyReady(true);
      setFinalEmailCheck(true);
    }
  };

 

아직 벡엔드와 연동이 되지 않았기 때문에 목데이터로 test를 진행했다.

 

만약 email이 TestEmail과 같다면 메세지를 '이미 사용하고 있는 이메일이에요.'로 저장하고 중복 여부를 true로 지정한다.

반대로 중복되는 email이 없다면 메세지를 '사용할 수 있는 이메일이에요.'로 저장하고 중복 여부를 false로 지정한다.

 

그리고 input의 editable을 위한 finalEmailCheck를 true로 지정한다.

 

IsEmailVerifyReady를 true로 저장한다. IsEmailVerifyReady는 현재 화면을 구현하는데 사용되는 것이 아닌 아래 사진과 같이 이메일 중복이 완료된 후 나타나는 인증번호 입력 textInput을 구현하기 위해 사용되기 때문에 참고만 하도록 한다.

5. 이메일 중복  검사 함수를 적용시킨다.

<DuplicationCheckBtn
	  //중복 검사 함수 적용
      onPress={CheckEmail}
      style={{
        backgroundColor:
          isEmailCheck && !finalEmailCheck
            ? `${MAIN_COLOR}`
            : `${GREY_COLOR}`,
      }}
      disabled={isEmail && !finalEmailCheck ? false : true}>
  <DuplicationCheckTitle>중복확인</DuplicationCheckTitle>
</DuplicationCheckBtn>

 

버튼의 onPress 옵션에 사전에 구현한 함수를 적용시킨다.

 

자 이제 모든 함수에 대한 설명은 끝났다. 사전에 작성한 state들을 이용해서 조건에 따라 css만 적용시키면 된다.

 

6,7,8 번은 맨 밑의 전체 코드 참고

 

6. 이메일 TextInput의 밑줄 색상을 조건에 따라 변경하기

검증 여부에 따라 밑줄 색상 변화를 위해 3번에서의 TextInput을 View로 감싸준다. 

 

이메일 TextInput이 눌려있으며 이메일 유효성 검사가 완료되었고 이메일 중복이 아닌 경우에는 파란색 색상을 보여준다.

반면 이메일 TextInput이 눌렸거나 혹은 이메일이 인증되지 않았고  이메일의 길이가 1이상인 경우에는 빨간색 색상을 보여준다. 

 

여기서 EmailisPress와 !isEmailCheck가 왜 or로 묶여있는지 궁금할 수 있다. EmailisPress는 없어도 되지 않나? 라는 생각도 할 수 있다.

이 부분을 해결하느라 제일 머리가 아팠고 아직 삼향연산자에 대한 이해력이 많이 부족하다고 느꼈던 부분이다.

 

만약 여기서 EmailisPress가 빠지게되면 이메일이 중복인 경우 borderBottom의 색상이 회색이 되어버린다. 따라서 EmailisPress를 넣어줘야한다.

 

요약하자면

이메일 TextInput 필드가 눌렸을 때 이메일 유효성 검증이 완료되었고(isEmailCheck = true) 이메일이 중복되지 않았을 때(isDuplication = false) borderBottomColor를 ${MAIN_COLOR}로 설정한다.

만약 그렇지 않고 이메일 유효성 검증이 완료되지 않았거나(isEmail이 거짓) 이메일 입력 필드가 눌렸을 때(EmailisPress = true) 그리고 이메일 TextInput 필드에 값이 있을 때(email의 길이가 1 이상) borderBottomColor를 ${ERROR_COLOR}로 설정한다.

그 외의 경우에는 borderBottomColor를 ${GREY_COLOR}로 설정한다.

 

7. 중복 검증이 된 경우 입력사항을 수정하지 못하도록 해야 한다.

editable부분에서 이메일의 모든 검증이 완료된 경우 false를 지정하여 수정하지 못하고 그렇지 않은 경우 true로 지정되어 수정이 가능하다.

 

8. 이메일 유효성 검사에 따른 버튼 활성화 및 색상 변경

이메일 유효성 검증(isEmailCheck = true)이 완료된 상태이고 중복 검증이 되지 않은 상태(!finalEmailCheck = false)일 경우에만 ${MAIN_COLOR}색의  버튼이 나오고 버튼이 활성화 되어야 한다.  그렇지 않은 경우에는 버튼이 ${GREY_COLOR}색이며 비활성화 상태이다.따라서 위와 같이 코드를 작성한다.  

EmailInputView
    style={{
      borderBottomColor:
        EmailisPress && isEmailCheck && !isDuplication
          ? `${MAIN_COLOR}`
          : (!isEmailCheck || EmailisPress) && email.length >= 1
            ? `${ERROR_COLOR}`
            : `${GREY_COLOR}`,
    }}
    >
    <EmailInput
      autoCorrect={false}
      spellCheck={false}
      autoCapitalize="none"
      autoFocus
      returnKeyType="next"
      inputMode="email"
      placeholder="이메일@naver.com"
      placeholderTextColor="#ced4da"
      value={email}
      onChangeText={onChangeEmail}
      onFocus={() => {
        setEmailIsPress(true);
      }}
      onBlur={() => {
        setEmailIsPress(false);
      }}
      editable={finalEmailCheck ? false : true}
    ></EmailInput>

    <DuplicationCheckBtn
      onPress={CheckEmail}
      style={{
        backgroundColor:
          isEmail && !finalEmailCheck
            ? `${MAIN_COLOR}`
            : `${GREY_COLOR}`,
      }}
      disabled={isEmailCheck && !finalEmailCheck ? false : true}
    >
      <DuplicationCheckTitle>중복확인</DuplicationCheckTitle>
    </DuplicationCheckBtn>
</EmailInputView>

이상이다.