퀴즈5 비밀번호 유효성 검증

비밀번호와 비밀번호 확인이 서로 일치하는지 검증하는 코드를 어떻게 짜야할 지 모르겠어요.. 현재 코드로 하면 에러가 납니다..! 봐주시면 감사하겠습니다ㅠㅠ 해당코드 //문제부분!!!!!!!!!!!!!!!!!!!!********* 으로 해놓았습니다!!

import { useState } from 'react';

export default function signUpPage() {

    //이메일, 비밀번호 담기
    const [ email, setEmail ] = useState("");
    const [ password, setPassWord ] = useState("");
    const [ Repassword, setRePassWord ] = useState("");

    //이메일 에러
    const [ emailError, setEmailError ] = useState("");

    //비밀번호 에러
    const [ passWordError, setPassWordError ] = useState("");

    //비밀번호확인 에러
    const [ RepassWordError, setRePassWordError ] = useState("");

    //이메일
    const onChangeEmail = (event) =>{
        //이벤트 핸들러
        console.log(event);
        console.log(event.target); //작동된 태그
        console.log(event.target.value); //작동된 태그에 입력된 값

        //변경된 이메일 값을 넣음
        setEmail(event.target.value);
        if(event.target.value !== ''){
            //내용 입력시 에러 없애주는거
            setEmailError("");
        }
    }

    const onChangePassWord = (event) => {
        setPassWord(event.target.value);
        if(event.target.value !== ''){
            setPassWordError("");
        }
    }


//문제부분!!!!!!!!!!!!!!!!!!!!*********
    const onChangeRePassWord = (event) => {
        // const currentPassWord = event.target.value;
        // setRePassWord(currentPassWord);
        // if(password === currentPassWord){
        //     setRePassWordError("");
        // }
        setRePassWord(event.target.value);
        if((password === Repassword()) || (event.target.value !== '')){
            setRePassWordError("");
        }



    }

    //등록하기 버튼 에러검증
    const onClickSign = () => {
        //이메일 @ 검증
        //includes("") 해당 문자가 있냐 없냐
        if(email.includes("@") === false) {
            setEmailError("이메일이 올바르지 않습니다. @ 형태로 입력해주세요!")
        } 
        if(!password){
            setPassWordError("비밀번호를 입력해주세요")
        }
//문제부분!!!!!!!!!!!!!!!!!!!!*********
        if((password !== Repassword) || (!Repassword)){
            setRePassWordError("비밀번호를 확인해주세요")
        }
        //회원가입 완료
        if(email && password === Repassword) {
            alert("회원가입이 완료되었습니다")
        }
    }


    return(
        <>
            이메일: <input type="text"  onChange={onChangeEmail} /> 
            <div>{emailError}</div>
            비밀번호 :<input type="text" onChange={onChangePassWord} /> 
            <div>{passWordError}</div>
            비밀번호확인 :<input type="text" onChange={onChangeRePassWord}  />
            <div>{RepassWordError}</div>
            <button id="submit" onClick={onClickSign}>회원가입</button>
        </>
    )
}

안녕하세요! 윰이님!

수업에서 의도된 방식은 password, repassword 둘을 각각 따로 저장하고, 회원가입 버튼을 눌렀을 때 1번만 비교하는 방식이었어요!^^

const [passWord, setPassWord] = useState()
const [rePassWord, setRePassWord] = useState()

// 비밀번호 저장
const onChangePassWord = (event) => {
    setPassWord(event.target.value);
    if(event.target.value !== ''){
        setPassWordError("");
    }
}

// 비밀번호확인 저장
const onChangeRePassWord = (event) => {
    setRePassWord(event.target.value);
    if(event.target.value !== ''){
        setRePassWordError("");
    }
}

// 회원가입눌렀을때, 비밀번호와 비밀번호확인이 일치하는지 비교하기
const onClickSign = () => {

    ...

    // 아래 '여기'를 채워보세요!^^ (비밀번호와 비밀번호확인이 일치하는지 비교하시면 되겠죠?!)
    if(여기){
        setRePassWordError("비밀번호를 확인해주세요")
    }

    ...   
}

인프런 커뮤니티 질문&답변