[MAC] Node/React 기초 - 로그아웃 페이지 만들기

출처 : 인프런_따라하며 배우는 노드, 리액트 시리즈 — 기본 강의

 

 

LandingPage.js

먼저 로그아웃 버튼을 만들어주고 그에 따라서 onClickHandler 함수를 아래와 같이 구현해준다. 

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

 function LandingPage(){//Functional Component 만들기
     
    
    useEffect(() => {
        axios.get('/api/hello')      //endpoint. getRequest를 server 즉 index.js로 보내질 것
        .then(response => {console.log(response)})   //server 에서 돌아온 response를 콘솔창에 출력해봄
    }, [])
    
    
    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

 

 

그러면 아래의 index.js 에서 구현한 로그아웃 기능에 의해 로그아웃 버튼을 클릭하면 console 창에 success:true 가 뜰 것이다. 

 

 

 

 

console 창에 success:true가 뜬 것을 볼 수 있다. 

 

 

 

추가적으로 로그아웃했을 경우 로그인 창으로 페이지가 이동하도록 구현해보자.

 

위에서 구현한 onClickHandler를 아래와 같이 수정한다.

  const onClickHandler = () => {
        axios.get('/api/users/logout')
        .then(response => {
            //console.log(response.data)
            if(response.data.success){
                props.history.push("/login")
            }else{
                alert('로그아웃 하는데 실패 했습니다.')
            }
        })
    }

 

 

그리고 먼저 로그인을 한다. 

 

 

그 후 로그아웃 버튼을 눌러보자.

다시 로그인 페이지로 돌아온 것을 확인할 수 있다.

 

 

참고)

password의 저 한글자는 

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

여기서 useState에 초기값을 넘겨줄 때 공백 한칸을 넘겨줘서 그런것이었다. ""로 공백 없이 넘겨주면 사라진다.