WEB 만들기 30 회원 가입 페이지

회원가입 페이지는

 

간단히 

이메일

이름

비밀번호

비밀번호 확인

확인 

이렇게 구성해서 만들 예정 입니다. 

 

 <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>Password</label>
          <input type="password" value={Password} onChange={onPasswordHandler}/>
          <br/>
          <button>
            Login
          </button>
        </form>

        </div>

로그인 페이지의 소스를 회원가입 페이지로 가져와 붙여넣어줍니다. return 아래에 넣어주시고

          <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>
              Login
            </button>
          </form>
  

이렇게 몇개의 창을 생성을 해주고 이름을 바꿔주시면 됩니다. 그리고 

const dispatch = useDispatch();

  const [Email, setEmail]= useState("")
  const [Password, setPassword] =useState("")

  const onEmailHandler = (event)=>{
      setEmail(event.currentTarget.value)
  }
  const onPasswordHandler =(event)=>{
    setPassword(event.currentTarget.value)
  }
  const onSubmitHandler =(event)=>{
    event.preventDefault();
   // console.log('Email',Email);
    //console.log('Password',Password);

    let body = {
      email : Email,
      password : Password
    }
    dispatch(loginUser(body))
    .then(response =>{
      if(response.payload.loginSuccess){
        props.history.push('/')
      }else{
        alert('Error')
      }
    })
  }

로그인 페이지에서 이부분도 가져와서 넣어주시고 

   const [Email, setEmail]= useState("")

    const [Name, setPName] =useState("")

    const [Password, setPassword] =useState("")

    const [ConfirmPassword, setConfirmPassword] =useState("")

추가

   const onEmailHandler = (event)=>{

        setEmail(event.currentTarget.value)

    }

    const onPasswordHandler =(event)=>{

      setPassword(event.currentTarget.value)

    }  

    const onNameHandler =(event)=>{

        setNameword(event.currentTarget.value)

      }

    const onConfirmPasswordHandler =(event)=>{

      setConfirmPassword(event.currentTarget.value)

    }

    const onSubmitHandler =(event)=>{

      event.preventDefault();

     // console.log('Email',Email);

      //console.log('Password',Password);

  

이부분 추가

import React, {useState} from 'react'
import { useDispatch } from 'react-redux';
import {registerUser} from '../../../_actions/user_action';
function RegisterPage(props) {
    const dispatch = useDispatch();
    const [Email, setEmail]= useState("")
    const [Name, setName] =useState("")
    const [Password, setPassword] =useState("")
    const [ConfirmPassword, setConfirmPassword] =useState("")
  
    const onEmailHandler = (event)=>{
        setEmail(event.currentTarget.value)
    }
    const onPasswordHandler =(event)=>{
      setPassword(event.currentTarget.value)
    }  
    const onNameHandler =(event)=>{
        setName(event.currentTarget.value)
      }
    const onConfirmPasswordHandler =(event)=>{
      setConfirmPassword(event.currentTarget.value)
    }
    const onSubmitHandler =(event)=>{
      event.preventDefault();
     // console.log('Email',Email);
      //console.log('Password',Password);
  

      if(Password !== ConfirmPassword){
          return alert('비밀번호가 다르게 입력되었습니다.')
      }
      let body = {
        email : Email,
        password : Password,
        name : Name
      }
      dispatch(registerUser(body))
      .then(response =>{
        if(response.payload.success){
          props.history.push('/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>
              회원가입
            </button>
          </form>
  
          </div>
    )
}

export default RegisterPage

 

전체적인 소스인고 출력되는 화면은 

 

 

전체적으로  입력이 가능하고 

이제 회원가입 버튼을 누르면 회원가입이 될수 있도록

하는데 원래 리덕스 사용안하면

 

Axios.post('/api/users/register',body)

하면되는데 

dispatch를 이용해서 해야한다 그래서 일단은 

dispatch부분을 수정하면됩니다. 

 

  if(Password !== ConfirmPassword){
          return alert('비밀번호가 다르게 입력되었습니다.')
      }
      let body = {
        email : Email,
        password : Password,
        name : Name
      }
      dispatch(registerUser(body))
      .then(response =>{
        if(response.payload.loginSuccess){
          props.history.push('/')
        }else{
          alert('Error')
        }
      })
    }

하고나서 user_action.js 로 가서 

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
       }
}

 

추가해주고 

types.js 부분에 가서

export const LOGIN_USER = "login_user";

export const REGISTER_USER = "register_user";

이렇게 해주고 

 

user_reducer.js부분에가서

       case REGISER_USER:

             return {...state,registerSuccess: action.payload}

            break;

        

 

이케이스 하나 추가해주면됩니다. 

즉 

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,registerSuccess: action.payload}
            break;
        
        default:
            return state;
    }
}

이렇게 되면 됩니다. 

로그인창으로 넘어가고 

db에 확인해보면

이렇게 만들어지면 되는것입니다.