회원 가입 페이지 만들기
위와 같은 레이아웃으로 회원가입 페이지를 만들어 보자.
이번에도 Redux를 적용하여 구현할 예정이다.
우선 다음과 같이 뷰를 짜 보자.
return (
<div style={{
display: 'flex', justifyContent: 'center', alignItems:'center',
width: '100%', height: '100vh'
}}>
<form style={{ display: 'flex', flexDirection:'column'}}
onSubmit={onSubmitHandler}
>
<label>Email</label>
<input type="email" value={Email} onChange={onEmailHandler} />
<label>Name</label>
<input type="name" value={Name} onChange={onNameHandler} />
<label>Password</label>
<input type="password" value={Password} onChange={onPasswordHandler} />
<label>Confirm Password</label>
<input type="password" value={ConfirmPwd} onChange={onConfirmPwdHandler} />
<br />
<button type="submit">
회원 가입
</button>
</form>
</div>
)
state와 setState를 작성해서 타이핑까지 가능하게 만들자.
const [Email, setEmail] = useState("")
const [Name, setName] = useState("")
const [Password, setPassword] = useState("")
const [ConfirmPwd, setCofirmPwd] = useState("")
const onEmailHandler = (event) => {
setEmail(event.currentTarget.value)
}
const onNameHandler = (event) => {
setName(event.currentTarget.value)
}
const onPasswordHandler = (event) => {
setPassword(event.currentTarget.value)
}
const onConfirmPwdHandler = (event) => {
setCofirmPwd(event.currentTarget.value)
}
이제 확인 버튼만 동작하게 만들면 된다.
Redux를 사용할 것이기 때문에 action을 만들어서 보내야 한다.
const onSubmitHandler = (event) =>{
event.preventDefault();
if(Password !== ConfirmPwd){
return alert('비밀번호와 비밀번호 확인이 다릅니다.')
}
let body = {
email: Email,
name: Name,
password: Password,
}
dispatch(registerUser(body))
.then(response => {
if(response.payload.success){
props.history.push('/login')
}else{
alert('Register Error')
}
})
}
Password와 ConfirmPwd가 일치하지 않는다면 error를 띄워준다.
만약 일치하다면 body를 만들어 action을 생성해 보내면 된다. 그리고 회원가입이 성공하면 로그인 페이지로 보낸다. action의 이름은'registerUser'이며 다음과 같이 작성하면 된다.
export function registerUser(dataToSubmit){
const request = Axios.post('/api/users/register', dataToSubmit)
.then(response => response.data )
return {
type: REGISTER_USER,
payload: request
}
}
서버에 앤드포인트를 설정한 대로 axios를 이용하여 post request를 보낸 뒤 response를 받아와 requset변수에 저장한다.
그런 다음 reducer에게 전달하면 된다.
reducer는 전달받은 action으로 다음 state를 만든다.
export default function(state = {}, action){
switch (action.type){
case LOGIN_USER:
return { ...state, loginSuccess: action.payload}
break;
case REGISTER_USER:
return { ...state, register: action.payload}
default:
return state;
}
}
REGISTER_USER라는 타입의 action이 왔다면 state와 register에 대한 정보를 return 한다.
이제 테스트를 해보자.
회원가입에 성공하여 로그인 페이지로 돌아왔다.
DB에도 데이터가 잘 전달됐다.