현재 버전

react js

리액트 고수님들 값이 비교가 안되서 질문드립니다 ㅠㅠㅠ



import React, {useStatefrom 'react';

const Auth = () => {
    
    const myId = {
        userId : "admin",
        pwd    : 12345
    }
    
    const [userId,setUserId] = useState(''); 
    const [userPwd,setUserPwd] = useState(''); 
    const [newAccount,setNewAccout] = useState(false);

    const onChange = (event=> {
        const {target:{name,value}} = event;
        if(name==="userId"){
            setUserId(value);
        }else if(name==="userPwd"){
            setUserPwd(value);
        }
    };
    console.log(myId.userId);
    console.log({userId});
    const onSubmit = (event=>{
        event.preventDefault();
        
        if(myId.userId==={userId}){
            alert("zzzz"); 
        }else{
            alert(JSON.stringify({userId}));
            // alert(JSON.stringify({userId}));
            alert("다릅니다 ㅎ ")
        }
    };

    return (
        <div>
            <form onSubmit={onSubmit}> 
                <input type="text" placeholder="아이디" value={userId} name="userId" onChange={onChange} required />
                <br></br>
                <input type="password" placeholder="비밀번호" value={userPwd} name="userPwd" onChange={onChange} required/>
                <br></br>
                <input type="submit" value={newAccount ? "Create Accout" : "Login"}/>  
            </form>
        </div>
    ); 
};

export default Auth;



아이디랑 비밀번호를 myId 에 담았습니다.


그 후 아이디만 가져와서 입력된 값과 비교하여 alert창을 띄우고 싶었습니다.


그런데 분명 둘다 값이 admin인데도 alert("다릅니다ㅎ") 가 뜨네요;;


각각 

console.log(myId.userId);


console.log({userId});  를 찍어보았는데   


 이렇게 뜹니다 


수정 이력

2020-11-06 16:37:31 에 아래 내용에서 변경 됨 #3


import React, {useState} from 'react';

const Auth = () => {

const myId = {
userId : "admin",
pwd : 12345
} const [userId,setUserId] = useState(''); const [userPwd,setUserPwd] = useState(''); const [newAccount,setNewAccout] = useState(false); const onChange = (event) => { const {target:{name,value}} = event; if(name==="userId"){ setUserId(value); }else if(name==="userPwd"){ setUserPwd(value); } }; console.log(myId.userId); console.log({userId});
const onSubmit = (event) =>{
event.preventDefault();

if(myId.userId==={userId}){
alert("zzzz");
}else{
alert(JSON.stringify({userId}));
// alert(JSON.stringify({userId}));
alert("다릅니다 ㅎ ")
}
};
return ( <div> <form onSubmit={onSubmit}> <input type="text" placeholder="아이디" value={userId} name="userId" onChange={onChange} required /> <br></br> <input type="password" placeholder="비밀번호" value={userPwd} name="userPwd" onChange={onChange} required/> <br></br> <input type="submit" value={newAccount ? "Create Accout" : "Login"}/> </form> </div> ); }; export default Auth;


아이디랑 비밀번호를 myId 에 담았습니다.


그 후 아이디만 가져와서 입력된 값과 비교하여 alert창을 띄우고 싶었습니다.


그런데 분명 둘다 값이 admin인데도 alert("다릅니다ㅎ") 가 뜨네요;;


각각 

console.log(myId.userId);


console.log({userId});  를 찍어보았는데   


 이렇게 뜹니다 

2020-11-06 16:36:35 에 아래 내용에서 변경 됨 #2


import React, {useState} from 'react';

const Auth = () => {

const myId = {
userId : "admin",
pwd : 12345
} const [userId,setUserId] = useState(''); const [userPwd,setUserPwd] = useState(''); const [newAccount,setNewAccout] = useState(false); const onChange = (event) => { const {target:{name,value}} = event; if(name==="userId"){ setUserId(value); }else if(name==="userPwd"){ setUserPwd(value); } }; console.log(myId.userId); console.log({userId});
const onSubmit = (event) =>{
event.preventDefault();

if(myId.userId==={userId}){
alert("zzzz");
}else{
alert(JSON.stringify({userId}));
// alert(JSON.stringify({userId}));
alert("다릅니다 ㅎ ")
}
};
return ( <div> <form onSubmit={onSubmit}> <input type="text" placeholder="아이디" value={userId} name="userId" onChange={onChange} required /> <br></br> <input type="password" placeholder="비밀번호" value={userPwd} name="userPwd" onChange={onChange} required/> <br></br> <input type="submit" value={newAccount ? "Create Accout" : "Login"}/> </form> </div> ); }; export default Auth;


아이디랑 비밀번호를 myId 에 담았습니다.


그 후 아이디만 가져와서 입력된 값과 비교하여 alert창을 띄우고 싶었습니다.


그런데 분명 둘다 값이 admin인데도 alert("다릅니다ㅎ") 가 뜨네요;;


각각 

console.log(myId.userId);


console.log({userId});  를 찍어보았는데   


 이렇게 뜹니다 

2020-11-06 16:36:08 에 아래 내용에서 변경 됨 #1


import React, {useState} from 'react';

const Auth = () => {

const myId = {
userId : "admin",
pwd : 12345
} const [userId,setUserId] = useState(''); const [userPwd,setUserPwd] = useState(''); const [newAccount,setNewAccout] = useState(false); const onChange = (event) => { const {target:{name,value}} = event; if(name==="userId"){ setUserId(value); }else if(name==="userPwd"){ setUserPwd(value); } }; console.log(myId.userId); console.log({userId});
const onSubmit = (event) =>{
event.preventDefault();

if(myId.userId==={userId}){
alert("zzzz");
}else{
alert(JSON.stringify({userId}));
// alert(JSON.stringify({userId}));
alert("다릅니다 ㅎ ")
}
};
return ( <div> <form onSubmit={onSubmit}> <input type="text" placeholder="아이디" value={userId} name="userId" onChange={onChange} required /> <br></br> <input type="password" placeholder="비밀번호" value={userPwd} name="userPwd" onChange={onChange} required/> <br></br> <input type="submit" value={newAccount ? "Create Accout" : "Login"}/> </form> </div> ); }; export default Auth;


아이디랑 비밀번호를 myId 에 담았습니다.


그 후 아이디만 가져와서 입력된 값과 비교하여 alert창을 띄우고 싶었습니다.


그런데 분명 둘다 값이 admin인데도 alert("다릅니다ㅎ") 가 뜨네요;;


각각 

console.log(myId.userId);


console.log({userId});  를 찍어보았는데   


 이렇게 뜹니다