리액트 기초 강의 (11) - 로그아웃

- LandingPage에 버튼 하나를 생성하여 로그아웃을 하게 만들면 됨

 

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

function LandingPage(){

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

    const onClickHandler = () =>{
        axios.get('/api/users/logout')
        .then(response => {
            console.log(response.data)
        })
    }

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

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

export default LandingPage;

- 로그아웃 클릭시 success : true 나옴

---

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

function LandingPage(){
    const navigate = useNavigate();

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

    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;

- 로그인 후에, 로그아웃 버튼 클릭 시에 메인 화면으로 이동