리액트 기초 강의 (10) - 회원가입

- Redux를 적용하여 회원가입 페이지 구현

---

- RegisterPage.js

import React, { useState } from 'react';
import {useDispatch} from 'react-redux';
import {registerUser} from '../../../_actions/user_actions';
import {useNavigate} from 'react-router-dom';

function RegisterPage(){
    const navigate = useNavigate();
    const dispatch = useDispatch();

	//state와 setState를 작성하여 타이핑을 가능하게 만듦
    const [Email, setEmail] = useState("")
    const [Password, setPassword] = useState("")
    const [Name, setName] = useState("")
    const [ConfirmPassword, setConfirmPassword] = useState("")

    const onEmailHandler = (event) => {
        setEmail(event.currentTarget.value)
    }

    const onNameHandler = (event) => {
        setName(event.currentTarget.value)
    }
    const onPasswordHandler = (event) => {
        setPassword(event.currentTarget.value)
    }

	//Redux를 사용할 것이기 때문에 action을 만들어서 보내야 함
    const onConfirmPasswordHandler = (event) => {
        setConfirmPassword(event.currentTarget.value)
    }

	
    const onSubmitHandler = (event) =>{
        event.preventDefault();
	
    	//Password와 ConfirmPwd가 일치하지 않는다면 error를 띄워주고,
        //만약 일치하다면 body를 만들어 action을 생성해 보냄
        if(Password !== ConfirmPassword){
            return alert('비밀번호와 비밀번호 확인은 같아야 합니다.')
        }
        
        let body = {
            email: Email,
            password: Password,
            name: Name
        }

		// 회원가입이 성공하면 로그인 페이지로 보냄
        dispatch(registerUser(body))
            .then(response => {
                if(response.payload.success){
                    navigate("/login")
                } else{
                    alert("Failed to sign 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>ConfirmPassword</label>
                <input type="password" value={ConfirmPassword} onChange={onConfirmPasswordHandler}/>

                <br/>
                <button type="submit">
                    회원가입
                </button>
            </form>
        </div>
    )
}


export default RegisterPage;

---

- user_action.js

 - 서버에 앤드포인트를 설정한 대로 axios를 이용하여 post request를 보낸 뒤 response를 받아와 requset변수에 저장하고,
   그런 다음 reducer에게 전달하면 됨

import axios from 'axios';
import {
    LOGIN_USER, REGISTER_USER
} from './types';

export function loginUser(dataTosubmit){
    const request = axios.post('/api/users/login', dataTosubmit)
        .then(response => response.data)
    
    return {
        type: "LOGIN_USER",
        payload: request
    }
}

export function registerUser(dataTosubmit){
    const request = axios.post('/api/users/register', dataTosubmit)
        .then(response => response.data)
    
    return {
        type: "REGISTER_USER",
        payload: request
    }
}

---

- reducer는 전달받은 action으로 다음 state를 만듦

import{
    LOGIN_USER, REGISTER_USER
} from '../_actions/types';


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}
            break;
        default:
            return state;
    }
}

---

export const LOGIN_USER = "login_user";
export const REGISTER_USER = "register_user";

[결과 출력]