React 이메일 유효성 체크

Question

다음과 같이 이메일 유효성 검사를 진행하고 싶습니다.isValid 객체에 loginEmail에 유효성 체크한 결과에 따라 true/false로 설정하고 싶은데,이메일 형식에 맞춰 입력했는데도 isValid.loginEmail 값이 false=> true로 바뀌지 않습니다. 무엇이 문제일까요? const [form, setForm] = useState({ loginEmail : '', pword : '', }) const [isValid, setValid] = useState({ ... loginEmail : false, pword : false, }) const handleInput = (e : React.ChangeEvent) => { setForm({ ...form, [e.target.name]:e.target.value, }) } // 아이디 // 담당자 정보 - 이메일 const checkLoginEmail = (e: React.ChangeEvent) => { handleInput(e) const regEmail = /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/; const isValidEmail = regEmail.test(e.target.value); console.log(isValidEmail) if (isValidEmail) { setValid({...isValid, loginEmail : true}) } else { setValid({ ...isValid, loginEmail: false }); } }; const handleSignupSubmit = async (e : React.FormEvent) => { e.preventDefault(); const options = { headers : { "Authorization" : 'JAK c4c7cd01394627955f5733fdc7386e16', "Content-Type" : "multipart/form-data" } } const formData = new FormData(); const {companyRegFile, ...rest} = form formData.append("file", companyRegFile!) const data = { ...rest }; formData.append("data", new Blob([JSON.stringify(data)], {type : "application/json"})); try{ const {data, status} = await axios.post(`${API}/dev/signup`, formData, options) ...) return(

{t('로그인 이메일')}

....

{isValid.loginEmail ? "사용가능한 이메일 형식입니다." : "사용할 수 없는 이메일 형식입니다."}

) console.log(isValid.loginId) //true //true //false //false //false false

케다켁 · Answer

setForm 은 state 에 set을 해주는 건가요 ?

일랑이유리 · Answer

테스트한 이메일의 입력 값도 알려주셔야 파악가능할꺼같아요가장 가능성 높아보이는건 정규식의 문제 같은데

CJ Kim · Answer

요렇게 해서 동기적으로 실행해도 안되나요? if (isValidEmail) { setValid((prev) => ({...prev, loginEmail : true})) } else { setValid((prev) => ({...prev, loginEmail : false})) }

그린티라떼 · Answer

하단에 useEffect 관련해서 생긴 문제였습니다. // 이메일 중복체크 함수 const checkUserAuth = async ( byLang : number, byType : number, strRecvValue : string, byAuthKind : number) => { const options = { headers : { "Authorization" : 'Bearer ---------------' } } const body = { ... byType: byType, // 0 : 이메일 , 1: 전화번호 ... } try{ const {data, status} = await axios.post(`${API}/cmn/11`, body, options) if(status === 200){ if(byType === 0){ alert('가입 가능한 이메일입니다.') setValid({...isValid, duplicateEmailCheck : true }) } else{ alert('가입 가능한 전화번호 입니다.') setValid({...isValid, phone : true }) } else{ if(byType === 0){ alert('가입 불가능한 이메일 입니다.') console.log(data.outcode) } else{ alert('가입 불가능한 전화번호 입니다.') console.log(data.outcode) } } catch(e : unknown){ if(e instanceof Error) console.log(e.message) } useEffect(()=>{ setValid({...isValid, duplicateEmailCheck : false}) },[form.email]) useEffect(()=>{ setValid({...isValid, phone : false}) },[form.phone]) return ( checkUserAuth(0, 0, form.email, 2)} borderRadius={12} marginLeft={10} btnColor ={(isValid.email === true && isValid.duplicateEmailCheck === false) ? true : isValid.email === true && isValid.duplicateEmailCheck === true ? false : false} /> disabled ={(isValid.email === true && isValid.duplicateEmailCheck === false) ? false : isValid.email === true && isValid.duplicateEmailCheck === true ? true : true} >{t('인증하기')}

{form.email !== '' && isValid.email ? "사용가능한 이메일 형식입니다." : form.email !== '' && !isValid.email ? "사용할 수 없는 이메일 형식입니다.": ""}

... )

React 이메일 유효성 체크

4개의 답변

Q&A 목록