React 기본적인 회원가입 구현하기 -3 (목차 3번 폼체크,useEffect)

목차 3번 

more than 심화...

 

 

자 이제 마지막으로 좀 더 심화과정으로 회원가입을 구현해보도록 하자..! 

 

이번에 우리가 추가로 구현할 것은 정규식을 통한 폼체크를 회원가입 기능에 넣을 것입니다.

 

 

 

아래는 구현된 코드의 모습이다.

import React,{useState,useEffect} from 'react'

const useInput = (defaultValue) => {
    const [value,setValue] = useState(defaultValue)
    const onChange = e => {
        setValue(e.target.value)
    }
    return{
        value,
        onChange,
    }
}

const validate = (input) => {    
    const {userid,password} = input
    const errors = {}

    if(userid === ''){
        errors.userid="이메일이 입력되지 않았습니다."
    } else if(!/^[a-z0-9%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/i.test(userid)){
        errors.userid = "입력된 이메일이 유효하지 않습니다."
    }

    if(!password){
        errors.password="비밀번호가 입력되지 않았습니다."
    } else if(password.length < 8){
        errors.password = "8자 이상의 패스워드를 사용해야 합니다."
    }

    return errors 
}

const Form = () => {
    const id = useInput('')
    const pw = useInput('')
    const [submit,setSubmit] = useState(false)  // 1번
    const [errors,setErrors] = useState({})

    const handleSubmit = e => {
        e.preventDefault()
        setSubmit(true)

        // id.value  
        // pw.value
        
        const input = {
            userid:id.value,
            password:pw.value
        }
       
        setErrors(validate(input))
    } 
    
    useEffect(()=>{
       if(submit){
            if(Object.keys(errors).length === 0){
                alert('회원가입이 완료되었습니다.')
            }
            setSubmit(false)
       }
    },[errors])

    return(
        <form onSubmit={handleSubmit}>
            <h2>회원가입</h2>
            <ul>
                <li>
                    <label htmlFor="userid">아이디</label> 
                    <input type='text' name="userid" {...id} />
                    {errors.userid && <span>{errors.userid}</span>} 
                </li>
                <li>
                    <label htmlFor="password">패스워드</label>
                    <input type='password' name="password" {...pw} />
                    {errors.password && <span>{errors.password}</span>}
                </li>
                <li>
                    <input type='submit' value="가입" disabled={submit} />
                </li>
            </ul>
        </form>
    )
}

export default Form

 

1.

먼저 구조분해 할당을 통해서 useState를 통해 상태값을 설정하도록 하자. 우리가 만들 것은 가입버튼을 눌렀을 때의 상태값 변화와 error가 발생했을 때의 상태값 변화에 대해 설정을 줄 것이다. submit은 기본값을 false로 줬다.

const [submit,setSubmit] = useState(false)
const [errors,setErrors] = useState({})

 

 

2.

인제 이 친구들을 handleSubmit 함수 안에서 사용하도록 할 것이다. 

const handleSubmit = e => {
        e.preventDefault()
        setSubmit(true)

        // id.value  
        // pw.value
        
        const input = {
            userid:id.value,
            password:pw.value
        }
       
        setErrors(validate(input))
    }

가입버튼을 눌렀을 때 setSubmit(false)에서 true로 바꾸게 만들고, 

 

input이라는 객체를 따로 만들어서 그 안에 userid와 password의 속성을 만들고 그 값을 id.value, pw.value로 설정을 해두었습니다. 우리는 이 input이라는 객체를 validate함수의 인자값으로 넣어서 보내줄 것입니다.

 

그렇다면 validate 함수가 무엇인지 알아보도록 하겠습니다.

 

 

3.

validate 함수 코드

const validate = (input) => {
    const {userid,password} = input
    const errors = {}

    if(userid === ''){
        errors.userid="이메일이 입력되지 않았습니다."
    } else if(!/^[a-z0-9%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/i.test(userid)){
        // 정규표현식
            // web7722@gamil.com
        errors.userid = "입력된 이메일이 유효하지 않습니다."
    }

    if(!password){
        errors.password="비밀번호가 입력되지 않았습니다."
    } else if(password.length < 8){
        errors.password = "8자 이상의 패스워드를 사용해야 합니다."
    }

    return errors 
}

 

validate함수는 회원가입을 진행할 때 사용자가 회원가입 양식에 맞게 설정할 수 있도록 도와주는 함수이다 ( 폼체크 )

먼저 매개변수로 아까 우리가 setErrors(validate(input))을 통해 input 보내준 것을 매개변수로 사용한다.

 

input 객체의 속성이었던 userid, password를 가져와서 조건문으로 사용할 것이고, errors라는 새로운 변수를 만들어서 빈 객체로 둘 것이다.

 

조건문으로 userid가 빈 값일 때 변수 errors에 userid라는 속성을 만들고 그 값을 "이메일이 입력되지 않았습니다." 라는 string 값을 넣었다. 아래도 위와 같은 방식으로 코드를 진행했다. 정규식같은 경우는 아직 미숙하니.. 나중에 정리하는 걸로..

 

마지막으로 if문이 다 해당하지 않는다면 return 값으로 errors 만 내뱉는다.

 

 

4. 

useEffect( )

useEffect(()=>{
       if(submit){
            console.log('회원거입 시켜줘')
            // Object.keys(errors) // ['userid','password'].length // 2 , [].length // 0
            if(Object.keys(errors).length === 0){
                alert('회원가입이 완료되었습니다.')
            }
            setSubmit(false)
            
       }
    },[errors])

useEffect는 실행구조가 setTimeout과 비슷하다고 생각하면된다.  -> 백그라운드로 보내짐.

 

조건문으로 시작을 하는데 submit이 true일 경우와 errors의 length가 0일 경우 ==> validate을 통해서 오류 문자열이 하나도 없을 경우 alert문으로 '회원가입이 완료되었습니다' 가 뜨게 하는 함수이다.  마지막으로 setSubmit을 통해 false 값으로 돌려준다.

 

그리고 useEffect(()=>{},[errors])  errors 배열이 들어감에 따라 componentDidUpdate가 발생이 된다. 그래서 버튼을 누를 때마다 계속 실행이 되면서 리렌더링이 되는 것을 알 수 있다.

 

 

 

5. 화면에 에러문구 설정한 것 뜨게하기

<li>
    <label htmlFor="userid">아이디</label> 
    <input type='text' name="userid" {...id} />
    {errors.userid && <span>{errors.userid}</span>} 
</li>
<li>
    <label htmlFor="password">패스워드</label>
    <input type='password' name="password" {...pw} />
    {errors.password && <span>{errors.password}</span>}
</li>

 {errors.userid && <span>{errors.userid}</span>}
 {errors.password && <span>{errors.password}</span>}

해당 코드는 errors.userid가 존재할 경우(&&)  jsx문법을 통해서 나타나게 하는 코드이다. errors.password도 동일한 코드이다.