로그인/폼체크(1)

목차

1. 입력값 체크할 state 선언
2. 유효성 검사를 위한 조건식
3. 조건식의 결과로 state 업데이트
4. 유효성 검사의 결과 확인
5. 누적 작성코드

 

 

---

 

 

 

 

인풋 박스의 기능을 최대한 활용해서 로그인 정보의 유효성을 검사해보자!

 

 

 

1. 입력 값 체크할 수 있는 state 선언

 

errors라는 객체를 선언해서

에러 객체의 내용이 비어 있으면 정상적인 밸류값,

객체의 속성이 들어가 있으면 들어간 속성에 해당하는 input의 value값이 유효하지 않음을 나타낼 것이다.

 

 

예시:

errors = {}
errors = { 
    userid: '아이디가 유효하지 않습니다',
    password: '패스워드가 유효하지 않습니다.'
}

 

 

 

Form 컴포넌트에 input박스에 value로 입력된 값을 체크할 수 있는 state를 만들어보자.

errors 객체의 state 초기값를 빈 객체 {}로 할당.

 

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

 

 

아래와 같이 li 엘리먼트 내에 errors 객체의 속성을 작성하여,

errors.userid가 true이면

userid객체의 내용을 포함하는 span 엘리먼트가 나타나게 하는 코드를 작성해보자

 

아래 코드의 의미:

• errors.userid가 true라면 = errors 객체에 userid 값이 있다면  = value의 입력값이 유효하지 않다면
• span 엘리먼트를 보여줘!

 

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

 

 

패스워드 부분도 동일하게 작성해주자.

 

아래 코드의 의미:

• errors.password가 true라면 = errors 객체에 password 값이 있다면 = 즉, value의 입력값이 유효하지 않다면,
• span 엘리먼트를 보여줘!

 

<li>
    <label htmlForm='password'>패스워드</label>
    <input type="password" name="password" {...pw}/>
    { errors.password && <span> { errors.password} </span> }
</li>

 

 

위와 같이 코드 작성 후

useState() 메서드의 인자값으로 userid와 password 값을 작성하면,

에러의 속성이 있는 코드가 되므로 span에 errors 객체의 속성값이 나타나게 된다.

 

 

 

 

자, 이젠 실제로 유효성을 검사할 조건식을 작성해보도록 하자.

2. 유효성 검사를 위한 조건식 작성

 

 

폼이 제출 됬을 때 id.value와 pw.value의 유효성 검사를 해야 하므로

handleSubmit함수 안에 메서드를 호출할 것이다.

 

그 이전에 유효성 검사를 할 조건문을 작성해보자

 

 

아래와 같이 작성할 경우 유효성 조건에 충족되지 않으면

obj 객체에 스트링 속성이 부여되며 콘솔창에 결과가 나타난다.

 

let obj = {}
if(id.value.length < 8){
    obj.userid = '아이디의 글자수는 최소 8자 이상입니다'
}
if (pw.value.length < 8){
    obj.password = '패스워드는 최소 8자 이상입니다.'
}
console.log(obj)

 

 

3. 조건식의 결과를 state에 반영

이제 이러한 조건식의 결과 인 obj 객체를 state 업데이트 시 반영하도록 해보자.

방법은 3-1, 3-2 두 가지가 있다.

 

 

3-1. handleSubmit 함수의 setErrors 메서드의 인자값으로 넣기

 

setErrors(obj)

 

handleSubmit 함수에서 state를 업데이트 하는 것은

effect에서 submit을 추적하는 것이 아니라 errors를 추적하는 것

 

 

errors를 추적한다는 것은,

submit 버튼을 눌렀느냐 안 눌렀느냐로 구분된다.

 

handleSubmit 함수가 실행될 경우

submit의 상태를 true로 바꿔주는 코드가 작성되었기 때문에 omponentdidMount는 실행되지 않을 것이다.

 

 

3-2 useEffect()메서드에 넣기

useEffect(() => {
    if (submit) {
        console.log('회원 가입 시켜줘')
        if (Object.keys(errors).length === 0){
            alert('회원가입 가능함')
            //axios
        }
        setSubmit(false)
    }
}, [submit]
)

 

 

 

4. 유효성 검사 결과 확인 방법

유효성 검사의 결과 인 error 객체의 속성이 있는 지 없는 지 확인 하는 방법은 다음과 같다.

 

1. 객체의 키값을 담아와서 배열에 담음
2. 배열의 엘리먼트 길이를 확인한다.

• 에러가 있다면 배열에 엘리먼트가 존재 ( arr.length > 0 )
• 에러가 없다면 빈배열 ( arr.length === 0 )

 

 

5. 누적 작성 코드

 

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

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

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

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

        let obj = {}
        if(id.value.length < 8){
            obj.userid = '아이디의 글자수는 최소 8자 이상입니다'
        }
        if (pw.value.length < 8){
            obj.password = '패스워드는 최소 8자 이상입니다.'
        }
        setErrors(obj)
    }

    useEffect(() => {
        if (submit) {
            console.log('회원 가입 시켜줘')
            if (Object.keys(errors).length === 0){
                alert('회원가입 가능함')
                //axios
            }
            setSubmit(false)
        }
    }, [submit]
    )
    
    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 htmlForm='password'>패스워드</label>
                    <input type="password" name="password" {...pw}/>
                    { errors.password && <span> { errors.password} </span> }
                </li>
                <li><input type="submit" value="가입" disabled={submit}></input></li>
            </ul>
        </form>
    )
}

export default Form