[React] 로그인 여부를 나타내는 툴바 만들기

 

• src > chapter_09 > Toolbar.jsx

import React from "react";

const styles = {
    wrapper: {
        padding: 16, 
        display: "flex",
        flexDirection: "row",
        border: "1px solid grey",
    },
    greeting: {
        marginRight: 8,
    },
}

function Toolbar(props) {
    const { isLoggedIn, onClickLogin, onClickLogout } = props;

    return (
        <div style={styles.wrapper}>
            {isLoggedIn && <span style={styles.greeting}>환영합니다!</span>}

            {isLoggedIn ? (
                <button onClick={onClickLogout}>로그아웃</button>
            ) : (
                <button onClick={onClickLogin}>로그인</button>
            )}
        </div>
    );
}

export default Toolbar;

 

• src > chapter_09 > LandingPage.jsx

import React, { useState } from "react";
import Toolbar from "./Toolbar";

function LandingPage(props) {
    const [isLoggedIn, setIsLoggedIn] = useState(false);

    const onClickLogin = () => {
        setIsLoggedIn(true);
    };

    const onClickLogout = () => {
        setIsLoggedIn(false);
    };

    return (
        <div>
            <Toolbar 
                isLoggedIn = {isLoggedIn}
                onClickLogin = {onClickLogin}
                onClickLogout = {onClickLogout}
            />
            <div style={{ padding: 16 }}>안녕하세요</div>
        </div>
    );
}

export default LandingPage;

 

• index.js 고친 후 npm start

로그인 버튼을 누르면 환영합니다! 글자와 함께 로그아웃 버튼이 나타난다.