삼항연산자를 이용한 실습

아래 변수에 값이 있다. isFull 이 true 이면 <p style={{ color: "red" }}>정원이 가득찼습니다.</p> 아니면 <p style={{ color: "blue" }}>입장할 수 있습니다.</p> 를 출력하세요.

import React from "react";

import { useState } from "react";

function E_ComfirmButton_Exam() {

  let [isFull, setIsFull] = useState(false);

  const display = () => {

    setIsFull(true);

  };

  return (

    <div>

      <button onClick={display} className="btn btn-warning">

        {(isFull === true) ? (

          <p style={{ color: "red" }}>정원이 가득찼습니다.</p>

        ) : (

          <p style={{ color: "blue" }}>입장할 수 있습니다.</p>

        )}

      </button>

    </div>

  );

}

export default E_ComfirmButton_Exam;

아래 변수 count 에 9 의 값이 있다.  10을 초과하면 ( count>10 ) <p style={{ color: "red" }}>정원이 가득찼습니다.</p>아니면 <p style={{ color: "blue" }}>입장할 수 있습니다.</p> 를 출력하세요.

function F_ConfirmButton_Exam2() {

    let [count, setCount] = useState(9);  // 변수선언

    const addCount = () => {  // 클릭이벤트 함수 => 클릭시  카운트 증가

        let val = count + 1;

        setCount(val);

     }

  return (

    <div>

        현재 정원 : {count}

        <br/>

        <button onClick={addCount}  disabled={((count > 10) === true) ? true : false}> 카운트 수가 10 초과하면 버튼 비활성화

           {

            (count > 10) === true ? <p style={{ color: "red" }}>정원이 가득찼습니다.</p> : <p style={{ color: "blue" }}>입장할 수 있습니다.</p>

           }

        </button>

    </div>

  )

}

 

 

onClickLogout 함수는 클릭하면 isLoggedIn 변수의 값을 true -> false 로 변경한다.
onClickLogIn 함수는 클릭하면 isLoggedIn 변수의 값을 false -> true로 변경한다.
코딩을 완성해보세요.

function G_LandingPage() {

    // TODO: 변수 정의

    const [isLoggedIn, setIsLoggedIn] = useState(false);   // 초기값 false

    // TODO: 함수 정의

    // nfn

    const onClickLogin = () => {

        // TODO: 아래 코딩하세요

        setIsLoggedIn(true);

       

     }

         // nfn

    const onClickLogout = () => {

        // TODO: 아래 코딩하세요

        setIsLoggedIn(false);

     }

  return (

    <div>

        {

            (isLoggedIn===true)? (

                <button onClick={onClickLogout}>로그아웃</button>

            ) : (

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

            )

        }

    </div>

  )

}