[react native] 로그인 할 때 이메일 유효성 검사

위와 같은 로그인 화면을 만들었다. 이메일과 비밀번호를 입력받아 인증받는다.

 

로그인과 관련해 몇 가지 규칙을 만들어 적용한다.

1. 이메일 형식에 맞는 ID를 입력해야 한다.

2. 공백은 허용되지 않는다.

3. 적절한 ID와 비밀번호를 입력한 경우에만 Sign in 버튼을 활성화시킨다.

 

1, 2. 이메일 형식 확인, 공백 제거

// util.js 에 따로 작성한다
 
// email형식 확인
export const validateEmail = email => {
    const regex = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/;
    return regex.test(email);
}
 
// 공백 제거
export const removeWhitespace = text => {
    const regex = /\s/g;
    return text.replace(regex, '');
}

emal형식인지 확인하는 validateEmail함수와, 공백을 제거해주는 removeWhitespace 함수를 만든다.

regex.text는 입력받은 문자열이 정규표현식에 맞는지 확인하는 함수이다. 맞으면 true, 틀리면 false를 반환한다.

text.replace(regex, '')은 text에 정규표현식(regex)이 있으면 두 번째 인자로 교환하는 함수이다. 두 번째 인자가 ''이므로 공백을 삭제한 문자열을 반환한다.

 

// Signin.js
import { validateEmail, removeWhitespace } from "../util";
 
// Signin Component
 const _handleEmailChange = (email) => {
    const changedEmail = removeWhitespace(email);
    setEmail(changedEmail);
    setErrorMessage(
      validateEmail(changedEmail) ? "" : "Please verify your email"
    );
  };
  // <Input value={email} onChangeText={_handleEmailChange} ... />
 
  const _handlePasswordChange = (password) => {
    setPassword(removeWhitespace(password));
  };
  // <Input value={password} onChangeText={_handlePasswordChange} ... />

로그인이 이뤄지는 Signin.js에서 정규표현식을 import해서 사용한다.

 

email주소를 입력받는 input에 입력값이 바뀔 때 마다 _handleEmailChange를 사용한다.

입력받은 email에서 공백을 제거한 후, validateEmail()을 통해 확인했을 때 false(부적합)이면 에러메시지를 출력하도록 한다.

 

password를 입력받는 input에서는 입력값이 바뀔 때 마다 _handlePasswordChange를 사용한다.

password의 공백을 제거해 password state에 입력한다.

 

3. Sign in 버튼 활성화

// Signin.js
const [disabled, setDisabled] = useState(false);
 
useEffect(() => {
  setDisabled(!(email && password && !errorMessage))
}, [email, password, errorMessage])
 
<Button title="Sign in" onPress={_handleSigninBtnPress} disabled={disabled} />

Sign in 버튼의 활성화를 담당하는 disabled state를 만든다.

useEffect를 통해 email, password, errorMessage의 상태가 변할 때 마다 setDisabled를 실행한다.

입력받은 email이 있고, password도 있고, errorMessage가 없어야 로그인이 가능한 상태이다.

그래서 disabled는 true일 때 입력불가, false일 때 입력가능한 상태이다.

그래서 &&를 통해 (email존재/password존재/errorMessage없음) 을 모두 만족하는 상태일 때 false가 되도록 만들어준다.(&&로 연결하면 세 가지를 모두 만족해야 true가 된다 -> !로 false로 바꿔줌)

 

실제로 작동하는 모습

email형식이 맞지 않을 땐 에러메시지가 나오고, 형식이 맞으면 사라지는 것과

공백을 입력하면 바로 공백이 사라지는 것을 확인할 수 있다.

올바른 이메일을 입력하고 비밀번호를 입력하면 Sign in 버튼이 활성화된다.

 

참고한 사이트

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test

RegExp.prototype.test() - JavaScript | MDN