[ReactJS] 로그아웃 기능 구현하기

 

로그아웃 기능은 기존에 만들었던 로그인과 회원가입에 이어지는 내용입니다.

로그인과 회원가입 기능이 있다면 로그아웃도 당연히 존재해야겠죠!

 

로그아웃은 LandingPage.js에 버튼을 하나 만들려고합니다.

 

import React, { useEffect } from 'react';
import axios from 'axios';

function LandingPage(props) {
    useEffect(() => {
        axios.get('/api/hello')
        .then(response => console.log(response.data))
    }, [])

    const onClickHandler = () => {
        axios.get('/api/users/logout')
        .then(response => {
            if(response.data.success){
                console.log(props.history);
                props.history.push('/login')
            } else {
                alert('Error')
            }
        })
    }

    return (
        <div style={{ 
            display: 'flex', justifyContent: 'center', alignItems: 'center', 
            width: '100%', height: '100vh'
            }}>
            <h2>시작 페이지</h2>
            <button onClick={onClickHandler}>
                로그아웃
            </button>
        </div>
    )
}

export default LandingPage;

랜딩페이지만 이런식으로 수정하면 아주 간단한 로그아웃 기능을 만들수 있습니다.