이메일 Input 유효성 검사하기(Email Input Validate)

const AuthInput = ({ name, ...props }) => {
  const dispatch = useDispatch();

  const { signUpForm, signUpError } = useSelector((state) => state.signUp);

  const handleChange = (e) => {
    dispatch(updateSignUpForm({ field: name, value: e.target.value }));
  };

  return (
    <>
      <input
        className={styles.input}
        value={signUpForm[name]}
        onChange={handleChange}
        {...props}
      />
      {signUpError[name] && (
        <div className={styles.error}>{signUpError[name]}</div>
      )}
    </>
  );
};

AuthInput.propTypes = {
  name: PropTypes.string,
};

export default AuthInput;

 

공통적으로 입력 필드를 포함하고 그 아래에 에러메시지를 표시하는 형태로 재사용 가능한 Input 컴포넌트를 설계했습니다. 각 Input 컴포넌트의 값은 Redux를 통해 전역 상태로 관리하고 있으며, useSelector 훅을 활용하여 해당 상태를 컴포넌트로 가져와 사용하였습니다.

 

이렇게 해서 입력 필드와 에러 메시지의 일관된 UI와 상태 관리를 구현하였으며, Redux를 사용하여 상태의 중앙 집중화와 예측 가능한 상태관리를 실현했습니다.

 

const EmailInput = () => {
  const dispatch = useDispatch();
  const { signUpForm, signUpError } = useSelector((state) => state.signUp);

  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  const handleBlur = () => {
    if (signUpForm.email === '') {
      dispatch(
        setSignUpError({ ...signUpError, email: '이메일을 입력해주세요.' }),
      );
    } else if (!emailRegex.test(signUpForm.email)) {
      dispatch(
        setSignUpError({
          ...signUpError,
          email: '올바른 형식의 이메일 주소를 입력해주세요.',
        }),
      );
    } else {
      dispatch(
        setSignUpError({
          ...signUpError,
          email: '',
        }),
      );
    }
  };

  return (
    <>
      <AuthInputLabel labelText={'이메일'} />
      <AuthInput
        placeholder={'이메일을 입력해주세요.'}
        name={'email'}
        onBlur={handleBlur}
      />
      <AuthInputHeight />
    </>
  );
};

export default EmailInput;

 

이메일 Input의 유효성검사는 blur 이벤트가 발생했을 때, 실행되게 했으며, 

 

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

 

이메일 정규식을 통해서 검증하는 방식으로 올바른 형식의 이메일 주소가 입력되게 만들었다.

 

blur 이벤트가 발생했을 때 error의 조건에 맞는 error 메세지를 redux의 error state에 세팅하고, error 메세지가 있을 경우, 에러 메세지가 클라이언트에 표시되도록 구현했다.

 

이후 추가적으로 해당 email 값을 서버로 전송해서, 현재 존재하지 않는 email인지를 확인하도록 하면 완성됩니다.