React, 로그인 여부를 나타내는 툴바 만들기, 조건부 렌더링

Toolbar.jsx

import React from "react";

// 스타일 객체를 정의합니다.
const styles = {
    wrapper: {
        padding: 16, // 컴포넌트의 안쪽 여백
        display: "flex", // 수평 정렬
        flexDirection: "row", // 요소를 가로로 정렬
        borderBottom: "1px solid grey", // 아래쪽 테두리
    },
    greeting: {
        marginRight: 8, // 오른쪽 여백
    },
};

function Toolbar({ isLoggedIn, onClickLogin, onClickLogout }) { // Toolbar 컴포넌트를 정의합니다.
    return (
        <div style={styles.wrapper}>
            {isLoggedIn &&
                <span style={styles.greeting}>환영합니다!</span>}
            {isLoggedIn ? (
                <button onClick={onClickLogout}>로그아웃</button>
            ) : (
                <button onClick={onClickLogin}>로그인</button>
            )}
        </div>
    );
}

export default Toolbar;

 

LandingPage.jsx

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

function LandingPage() { // LandingPage 컴포넌트를 정의합니다.

    const [isLoggedIn, setIsLoggedIn] = useState(false); // 로그인 상태를 관리하는 state를 생성합니다.

    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

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import PlayGround from "./chapter_00/PlayGround";

import LandingPage from "./chapter_09/LandingPage";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
    <React.StrictMode>
        <LandingPage />
    </React.StrictMode>
);

reportWebVitals();

// https://github.com/soaple/first-met-react-practice-v18/tree/master/src

 

결과

출처

https://www.inflearn.com/course/처음-만난-리액트

https://github.com/soaple/first-met-react-practice-v18/tree/master/src