완성본:https://github.com/qjawns0222/hompage.git
오늘은 마지막으로 회원가입을 만들어 보겠습니다.
그럼 프로젝트 열어주시고
component/create.jsx pages/create.jsx container/createcontainer.jsx이렇게 3가지를 만들어주세요
pages/create.jsx
import React from "react" ;
import Createcontainer from "../container/Createcontainer" ;
export default function Create () {
return < Createcontainer /> ;
}
딱히 기존가 특별히 다른건 없습니다.
component/create.jsx
import React from "react" ;
import { Link } from "react-router-dom" ;
import style from "./css/Login.module.css" ;
import Form from "./Form" ;
export default function Login ({
id ,
password ,
idchange ,
passwordchange ,
login ,
loginkey ,
}) {
return (
< Form >
<div className ={ style . loginbox } >
<div className ={ style . inputbox } >
<div className ={ style . option } >
<div className ={ style . name } > 아이디 </div> :
<div className ={ style . value } >
<input
type = "text"
value ={ id }
className ={ style . id }
placeholder = "아이디를 입력해주세요"
onChange ={ idchange }
onKeyPress ={ loginkey }
/>
</div>
</div>
<div className ={ style . option } >
<div className ={ style . name } > 비밀번호 </div> :
<div className ={ style . value } >
<input
type = "password"
value ={ password }
placeholder = "비밀번호 입력해주세요"
className ={ style . password }
onChange ={ passwordchange }
onKeyPress ={ loginkey }
/>
</div>
</div>
</div>
<div className ={ style . buttonbox } >
<button className ={ style . login } onClick ={ login } >
계정 생성
</button>
< Link to ={ "/login" } >
<button className ={ style . makecount } > 이전 화면 </button>
</ Link >
</div>
</div>
</ Form >
);
}
여기도 다른거와 큰차이는 없습니다.
container/createcontainer.jsx
import Create from "../Components/Create" ;
import React , { useContext , useState } from "react" ;
import store from "../context/store" ;
import { useNavigate } from "react-router-dom" ;
export default function Createcontainer () {
const value = useContext ( store );
const navigate = useNavigate ();
const [ id , setId ] = useState ( "" );
const [ password , setPassword ] = useState ( "" );
console . log ( value . authdata );
const idchange = ( e ) => {
setId ( e . target . value );
};
const passwordchange = ( e ) => {
setPassword ( e . target . value );
};
const login = () => {
if ( value . authdata . find (( p ) => p . id === id )) {
alert ( "아이디 중복입니다." );
return ;
} else if ( id === "" || password === "" ) {
alert ( "빈칸없이 입력해주세요" );
return ;
}
value . authdata . push ({ id : id , password : password });
navigate ( "/login" );
};
const loginkey = ( e ) => {
if ( e . charCode === 13 ) {
if ( value . authdata . find (( p ) => p . id === id )) {
alert ( "아이디 중복입니다." );
return ;
} else if ( id === "" || password === "" ) {
alert ( "빈칸없이 입력해주세요" );
return ;
}
value . authdata . push ({ id : id , password : password });
navigate ( "/login" );
}
};
return (
< Create
id ={ id }
password ={ password }
idchange ={ idchange }
passwordchange ={ passwordchange }
login ={ login }
loginkey ={ loginkey }
/>
);
}
const login = () => {
if ( value . authdata . find (( p ) => p . id === id )) {
alert ( "아이디 중복입니다." );
return ;
} else if ( id === "" || password === "" ) {
alert ( "빈칸없이 입력해주세요" );
return ;
}
value . authdata . push ({ id : id , password : password });
navigate ( "/login" );
};
여기서는 이부분만 설명하겠습니다.
배열을 find함수를 통해서 배열내부의 id요소와 입력한 id가 같으면 return을 하게 됩니다. 즉 return이있으면 true가 되어서 함수를 실행하게 됩니다. 그러므로 true가 나온다는 것은 아이디 중복이므로 아이디 중복이라고 알려주고
return을 넣어서 함수를 종료시켜 버립니다.
또한 id와 비밀번호 둘중하나라도 빈칸이면 안되므로 alert로 알려주고 return해줍니다.
위에 두가지 조건에 해당하지 않으면 생성이 가능하게 됩니다. push로 배열에 같은형식의 객체로 저장해주고 다시 로그인화면으로 되돌려줍니다.
이렇게 로그인 기능과 회원가입 기능을 마쳤습니다. 제가 만든건 진짜 복습용입니다. 쓸만한건 아니고 그냥 제대로 이해했나 정도로 따라해보시면 좋을거 같습니다. 공부하다가 데이터를 안보이게 전달되도록 하고 싶어서 어떻게 하나 찾아보느데 백엔드쪽이더라고요 그것도 한번 공부해봐야겠어요 ㅎㅎ 근데 좀 오래 걸릴거 같네요 아마 typescritp jsp 도 좀 하고 네트워크관리사2급도 따고 나서 해볼려하는데 ㅎㅎㅎ 좀걸릴거 같아요 이만 React는 마치겠습니다.
