boilerplate(client) - 로그아웃 기능 만들기(reactstrap 적용)

따라하며 배우는 노드, 리액트 기본 강의를 듣고 정리한 내용입니다.

 

 

 

reactstrap

개념

Bootstrap은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크로 다양한 기능을 제공한다.

크롬, 파이어폭스, 오페라, 사파리 등 많은 브라우저를 지원하며 웹사이트 개발의 효율을 증대시켜 준다.

 

reactstrap은 bootstrap을 react에서 더 쉽게 사용하기 위한 프레임워크이다.

 

설치

reactstrap을 사용하기 위해서는 reactstrap 뿐만 아니라 bootstrap도 설치해야 한다.

reactstrap의 설치 명령어는 다음과 같다.

 

npm install reactstrap --save
npm install bootstrap@4.6.0 --save

 

적용

bootstrap의 css와 reactstrap에서 사용할 컴포넌트를 import하면 된다.

 

import { Button } from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

 

버튼 컴포넌트 외에 Alerts, Card, Form 등 reactstrap을 활용할 수 있는 것이 꽤 많다.

다른 컴포넌트들과 그 적용에 대한 내용은 다음 페이지에서 확인할 수 있다.

https://reactstrap.github.io/components/alerts/

reactstrap - Alerts

 

 

로그아웃 기능 구현하기

1. UI 만들기

src > components > views > LandingPage 폴더 안의 LandingPage.js를 생성한다.

이후 원하는 UI를 구현 후 return 시킨다.

 

reactstrap을 이용하여 primary color의 로그아웃 버튼을 구현하였다.

 

import React from 'react';
import { Button } from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

function LandingPage() {

    return (
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%', height: '100vh' }}>  
            <Button color="primary" onClick={onClickHandler}>로그아웃</Button>
        </div>
    );
}

export default LandingPage;

 

위의 구현 내용을 확인해보면 다음과 같다.

 

 

2. onclick event handler 구현

로그아웃에 대해서는 redux를 이용하지 않고 바로 버튼의 onClick event handler를 구현하였다.

로그아웃에 성공했다면 LoginPage로 보내는 작업을, 로그아웃에 실패했다면 실패했다는 안내 메세지를 띄운다.

 

import React from 'react';
import { Button } from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import axios from 'axios';

function LandingPage(props) {

    const onClickHandler = () => {
        axios.get('/api/users/logout')
            .then(response => {
                if(response.data.success) props.history.push('/login');
                else alert("Failed to logout");
            });
    }  
    
    return (
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%', height: '100vh' }}>   
            <Button color="primary" onClick={onClickHandler}>로그아웃</Button>
        </div>
    );
}

export default LandingPage;

 

 

결과

프로그램을 실행시킨 후 http://localhost:3000/login으로 들어가 로그인 후 로그아웃 버튼을 눌렀을 때 정상적으로 LoginPage로 이동하는 모습을 확인할 수 있었다.

 

 

로그인을 하지 않고 로그아웃 버튼을 눌렀을 때 로그아웃에 실패했다는 안내 메세지도 확인할 수 있었다.