회원 가입 페이지

회원 가입 페이지 만들기

위와 같은 레이아웃으로 회원가입 페이지를 만들어 보자.
이번에도 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에도 데이터가 잘 전달됐다.