(실습) 로그인 상태

따라서 치지 않고 해보려고 했으나 실패

아직 너무 익숙하지 않다.

// Toolbar.jsx
import React from "react";

const styles = {

    wrapper: {
        padding : 16,
        display: 'flex',
        flexDirection: 'row',
        borderBottom: '1px solid grey',
    },
    
    greeting: {
        marginRight: 8,
    },

}


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

    return(
        <div style={styles.wrapper}>
        // 그냥 wrapper이라고 써 놓으니 찾지 못함
        
            {isLogin && <span style={styles.greeting}>환영합니다!</span>}
            // isLogin = ture 일 때, 환영합니다! 렌더링 

            {isLogin ? ( // 로그인 상태에 따른 button 렌더링 
                <button onClick={onClickLogout}>로그아웃</button>
            ) : (

                <button onClick={onClickLogin}>로그인</button>

            )}

        </div>
    )

}

export default Toolbar;

Toolbar를 사용하는 LandingPage.jsx

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

function LandingPage(props) {

    const [isLogin, setIslogin ] = useState(false);
    // 초기값 false

    const onClickLogout = () => { // 
        setIslogin(false);
    };

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

    return(
        <div>
            <Toolbar
                isLogin={isLogin}
                onClickLogin = {onClickLogin}
                onClickLogout = {onClickLogout}
                />
                <div style={{padding: 16}}> 리액트 공부! </div>
        </div>

    )

}

export default LandingPage;

로그인 클릭 시