[ React ] 이메일 유효성 검사 후 에러메세지 띄우는 로직 (onBlur 이벤트)

원하는 기능

이메일을 입력하고, 유효성 검사를 하여 틀리면 에러메세지를 띄우는 기능을 넣고 싶다

나는 React Typescript MUI 를 사용하는 환경이다.

1차 결과물

import React, { useState } from 'react';
import { TextField, Button } from '@mui/material';

export default function EmailForm() {
  // 이메일 상태와 이메일 검증 결과 상태(emailAlert)
  const [email, setEmail] = useState('');
  const [emailAlert, setEmailAlert] = useState(true);

  // 이메일 형식 검증 함수
  const validateEmail = (email: string) => {
    // 이메일 형식에 맞는지 확인하는 정규식
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  };

  // 입력값이 변경될 때 호출되는 함수
  const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const newEmail = event.target.value;
    setEmail(newEmail);
    
    // 이메일 형식을 검증하여 알림 상태를 업데이트
    if (validateEmail(newEmail)) {
      setEmailAlert(true); // 올바른 이메일 형식
    } else {
      setEmailAlert(false); // 잘못된 이메일 형식
    }
  };

  return (
    <form>
      <TextField
        fullWidth
        required
        id="email"
        type="email"
        placeholder="이메일을 입력해주세요"
        value={email}
        onChange={handleEmailChange}
        error={!emailAlert} // emailAlert가 false이면 에러 표시
        helperText={emailAlert ? null : '올바른 이메일 형식으로 입력해주세요.'} // 에러 메시지 표시
      />
      <Button type="submit" variant="contained" color="primary" disabled={!emailAlert}>
        제출
      </Button>
    </form>
  );
}

이 로직으로 이메일 입력 시 실시간으로 이메일 형식을 검증하고, 오류가 있으면 경고 메시지를 표시할 수 있습니다.

1차결과에서 생긴 문제 : 위의거를 적용하면, 텍스트필드에 입력도중인데도 에러메세지가 띄워지는 불필요함이 생겼다

 

2차 결과물

입력하는 동안 실시간으로 에러 메시지가 뜨는 것이 아니라, 사용자가 이메일 필드에서 포커스를 벗어났을 때(blur) 유효성 검사를 진행하고 에러 메시지를 띄우는 방식으로 구현하는 것으로 바꿨다

이를 위해 onBlur 이벤트를 사용했다!!!! (*새로운 개념)

아래는 필드를 벗어났을 때 유효성 검사를 하고, 에러 메시지를 띄우는 코드

import React, { useState } from 'react';
import { TextField, Button } from '@mui/material';

export default function EmailForm() {
  const [email, setEmail] = useState('');
  const [emailAlert, setEmailAlert] = useState(true); // 이메일 유효성 상태 (기본값 true)
  const [touched, setTouched] = useState(false); // 사용자가 필드를 벗어났는지 여부

  // 이메일 형식 검증 함수
  const validateEmail = (email: string) => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  };

  // 이메일 입력 시 상태 업데이트
  const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setEmail(event.target.value);
  };

  // 이메일 필드에서 포커스를 벗어날 때 호출되는 함수
  const handleEmailBlur = () => {
    setTouched(true); // 사용자가 필드를 떠났다는 표시
    setEmailAlert(validateEmail(email)); // 유효성 검사를 실행
  };

  return (
    <form>
      <TextField
        fullWidth
        required
        id="email"
        type="email"
        placeholder="이메일을 입력해주세요"
        value={email}
        onChange={handleEmailChange}
        onBlur={handleEmailBlur} // 포커스를 벗어날 때 유효성 검사
        error={touched && !emailAlert} // 필드가 떠난 후에만 에러 표시
        helperText={touched && !emailAlert ? '올바른 이메일 형식으로 입력해주세요.' : null} // 오류 메시지
      />
      <Button type="submit" variant="contained" color="primary" disabled={!emailAlert}>
        제출
      </Button>
    </form>
  );
}

 

 

2차 결과물에서 내가 원하는 결과를 도출해냈고 여기서 onBlur이벤트라는 것을 배웠다
나중에 이런것을 할때 기억해야지