return (
// 중앙의 정렬쓰
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "100%",
height: "100vh",
}}
>
//버튼을 눌렀을때 onSubmitHandler 함수 호출
<form
style={{ display: "flex", flexDirection: "column" }}
onSubmit={onSubmitHandler}
>
// 이메일, 이름, 패스워드, 패스워드 확인은 값이 바꼈을때 이벤트핸들러 호출
<label>Email</label>
<input type="email" value={Email} onChange={onEmailHandler} />
<label>Name</label>
<input type="text" value={Name} onChange={onNameHandler} />
<label>Password</label>
<input type="password" value={Password} onChange={onPasswordHandler} />
<label>Confirm Password</label>
<input type="password" value={ConfirmPassword} onChange={onConfirmPasswordHandler} />
<br />
<button type="submit">Register</button>
</form>
</div>
);
// email을 위한 state
const [Email, setEmail] = useState("");
// name을 위한 state
const [Name, setName] = useState("");
// password를 위한 state
const [Password, setPassword] = useState("");
// confrim를 위한 state
const [ConfirmPassword, setConfirmPassword] = useState("");
// input의 내용을 입력할 수 있게
const onEmailHandler = (event) => {
setEmail(event.target.value);
};
const onNameHandler = (event) => {
setName(event.target.value);
};
const onPasswordHandler = (event) => {
setPassword(event.target.value);
};
const onConfirmPasswordHandler = (event) => {
setConfirmPassword(event.target.value);
};
const onSubmitHandler = (event) => {
// 새로고침을 막아주기 위해
event.preventDefault();
// console.log(`email: ${Email}`);
// console.log(`password: ${Password}`)
// 비밀번호 일치 여부
if(Password !== ConfirmPassword) {
return alert('비밀번호가 일치하지 않습니다.')
}
let body = {
email: Email,
name: Name,
password: Password
};
dispatch(registerUser(body));
};
export const REGISTER_USER = "register_user";
import { LOGIN_USER, REGISTER_USER } from './types';
export function registerUser(dataToSubmit) {
// body의 데이터를 '/api/users/register' 로 보내고,
// 서버의 DB에서 데이터를 비교한 후 보내온 가입성공여부 데이터를
// reducer에서 처리
const request = axios.post('/api/users/register', dataToSubmit)
.then(response => response.data)
return {
type: REGISTER_USER,
payload: request
}
}
case REGISTER_USER:
return { ...state, registerSuccess: action.payload };
//request를 보내고 response의 데이터가 성공이면 로그인 페이지로
//아니면 알림창으로 실패메시지 알림.
dispatch(registerUser(body)).then((response) => {
if(response.payload.success) {
props.history.push("/login")
} else {
alert("Failed to sign up")
}
});
우선 기본 UI
비밀번호가 다를 경우
회원가입에 실패한 경우(비밀번호가 최소 5자 이상)
-회원가입에 성공한 경우
ps. react 흐름 읽는게 익숙하지 않아서 정리가 산만한데, 후에 어느 정도 익숙해지면 다시 정리하겠습니다.
블로그 잘 보고 갑니다^^