[노드/리액트 기초] #29~32. 로그인 페이지, 회원가입 페이지, 로그아웃

**본 포스팅은 유튜브&인프런 John Ahn님의 노드 리액트 기초 강의를 참고하여 작성하였습니다.**

 

 

Login Page

이메일 -> 비밀번호 -> 확인(redux로 처리) => 로그인

Dispatch -> Action -> Reducer

// type.js
export const LOGIN_USER = "login_user";

 

// LoginPage.js (Dispatch)
import React, { useState } from 'react'
import Axios from 'axios'
import { useDispatch } from 'react-redux';
import { loginUser } from '../../../_actions/user_action'
import { useNavigate } from "react-router-dom";

function LoginPage(props) {
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const [Email, setEmail] = useState("") //state 초기상태는 빈칸""
  const [Password, setPassword] = useState("")

  const onEmailHandler = (event) => { //state을 바꾸면 value가 바뀜
      setEmail(event.currentTarget.value)
  }

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

  const onSubmitHandler = (event) => {
      event.preventDefault(); //페이지 리프레시 방지
      
      let body = {
        email: Email,
        password: Password
      }

      dispatch(loginUser(body))
          .then(response => { 
              if(response.payload.loginSuccess){
                navigate('/'); //로그인 성공시 처음 페이지로 이동
              }else{
                alert('Error')
              }
          })
  }

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

    </div>
  )
}

export default LoginPage

 

// user_action.js (Action)
import axios from 'axios'
import{
    LOGIN_USER
} from './types';

export function loginUser(dataToSubmit){
    
    const request = axios.post('/api/users/login', dataToSubmit) //서버에 이메일과 비번 보내기
        .then(response => response.data ) //서버에서 받은 data를 request에 저장
    
    return { //reducer에 넘겨주기
        type: LOGIN_USER,
        payload: request
    }
}

 

// user_reducer.js (Reducer)
// reducer의 역할은 (previousState, action) => nextState 을 리턴

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

export default function (state = {}, action){
    switch (action.type) {
        case LOGIN_USER:
            return {...state, loginSuccess: action.payload} // ...state : 원본 state(아무것도 없는 것 {})을 가져옴
            break;
        case REGISTER_USER:
            return {...state, register: action.payload}
            break;
        default:
            return state;
    }
}

 

 

---

 

 

Register Page

이메일 , 이름, 비밀번호, 비밀번호 확인 -> 확인(redux로 처리) => 회원가입
로그인 페이지 만들기와 비슷하게 하면 된다.

 

 

---

 

 

로그아웃

간단하니까 redux로 안하고 LandingPage.js에 버튼 만들어줬다.

import React, {useEffect} from 'react'
import axios from 'axios'
import { useNavigate } from "react-router-dom";

function LandingPage() {
  const navigate = useNavigate();
...
  const onClickHandler = () => {
    axios.get('/api/users/logout')
        .then (response => {
          if(response.data.success){ //로그아웃 성공시 로그인 페이지로 이동
               navigate("/login");
          } else {
            alert('로그아웃 하는데 실패했습니다.')
          }
        })
  }

  return (
    <div style={{
        display: 'flex', justifyContent: 'center', alignItems: 'center'
        , width: '100%', height: '100vh'
    }}>
      <h2>시작 페이지!</h2>

      <button onClick={onClickHandler}>
          로그아웃
      </button>

    </div>
  )
}

export default LandingPage