boiler-plate : 회원가입 페이지 만들기

저번 시간에는 로그인 페이지를 만들었었다.

이번에는 마지막으로 회원가입 페이지를 만드는 시간을 가지려 한다.

 

1. LoginPage.js를 가져와 추가하기

// client > src > components > views > RegisterPage > RegisterPage.js
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { registerUser } from '../../../_actions/user_action';

function RegisterPage(props) {
    const [Email, setEmail] = useState("");
    const [Password, setPassword] = useState("");
    const [Name, setName] = useState("");
    const [ConfirmPassword, setConfirmPassword] = useState("");

    const dispatch = useDispatch();

    const onEmailHandler = (event) => {
        setEmail(event.currentTarget.value);
    }
    const onNameHandler = (event) => {
        setName(event.currentTarget.value);
    }
    const onPasswordHandler = (event) => {
        setPassword(event.currentTarget.value);
    }
    const onConfirmPasswordHandler = (event) => {
        setConfirmPassword(event.currentTarget.value);
    }

    const onSubmitHandler = (event) => {
        event.preventDefault(); // 리프레시 방지

        if(Password !== ConfirmPassword) {
            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("Failed to Sing Up")
                }
            })
        
    }
    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="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">SignUp</button>
            </form>
        </div>
    )
}

export default RegisterPage

로그인에서 진행하던 것을 가져와 Name, ConfirmPassword값을 추가해주었다.

 

2. user_action 추가하기

// client > src > _actions > user_action.js
import axios from 'axios';
import {
    LOGIN_USER,
    REGISTER_USER
} from './types';

// 일부 생략

export function registerUser(dataToSubmit) {
    
    const request = axios.post('/api/users/register', dataToSubmit)
        .then(response => response.data)

    return {
        type: REGISTER_USER,
        payload: request
    }
}

 

3. types 추가하기

// client > src > _actions > types.js

// 일부 생략
export const REGISTER_USER = "register_user";

로그인과 동일하게 타입을 정리해준다.

 

4. user_reducer 추가하기

// client > src > _reducers > user_reducer.js
import {
    LOGIN_USER,
    REGISTER_USER
} from '../_actions/types';

export default function (state = {}, action) {
    switch (action.type){
        // 일부 생략
        case REGISTER_USER:
            return { ...state, register: action.payload }
            break;

        default:
            return state;
    }
}

상단에 있는 비어있는 값( state = {} )을 가져( ...state )와 작업을 해주면 된다.

 

오늘의 코드 바로가기