9강. Conditional Rendering

Conditional Rendering의 정의와 inline Conditions

Conditional Rendering : 조건부 렌더링, 어떠한 조건에 따라서 렌더링이 달라지는 것

function UserGreeting(props){
  return <h1>다시 오셨군요!</h1>
}

function GuestGreeting(props){
  return <h1>회원가입을 해주세요.</h1>
}

function Greeting(props){
  const isLoggedIn = props.isLoggedIn;
  
  if(isLoggedIn){
    return <UserGreeting />;
  }
  return<GuestGreeting />;
}

 

JS의 Truthy와 Falsy

//Truthy : true는 아니지만 true로 여겨지는 값
true
{} (empty object)
[] (empty array)
42 (number, not zero)
"0", "false" (string, not empty)

//Falsy : false는 아니지만 false로 여겨지는 값
false
0, -0 (zero, minus zero)
0n (BigInt zero)
'', "", `` (empty string)
null
undefined
NaN (not a number)

 

Element Variables : element를 변수처럼 다루는 방법

function LoginButton(props){
  return (
    <button onClick = {props.inclick}>
      로그인
    </button>
  );
}

function LogoutButton(props){
  return (
    <button onClick = {props.inclick}>
      로그아웃
    </button>
  );
}

function LoginControl(props){
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const handleLoginClick = () => {
    setIsLoggedIn(true);
  }
   const handleLogoutClick = () => {
    setIsLoggedIn(false);
  }
  
  let button;	//button이라는 변수에 컴포넌트 대입 = element variable
  if(isLoggedIn){  
    //로그인상태이면 로그아웃버튼 보이기
    button = <LogoutButton onclick = {handleLogoutClick} />;
  } else {
    //로그아웃상태이면 로그인버튼 보이기
    button = <LoginButton onclick = {handleLoginClick} />;
  }
  
  return (
    <div>
      <Greeting isLoggedIn = {isLoggedIn}>
      {button}
    </div>
  )
}

 

inline Conditions : 조건문을 코드안에 집어넣는 것

inline-if 

//단축평가
true && dummy -> dummy
false && dummy -> false

function Mailbox(props){
  const unreadMessages = props.unreadMessages;
  
  return(
    <div>
      <h1>안녕하세요</h1>
      {unreadMessages.length > 0 &&
        <h2>
          현재 {unreadMessages.length}개의 읽지않은 메시지가 있습니다.
        </h2>
      }
    </div>
  );
}

function Countr(props){
  const count = 0;
  return (
    <div>
      {count && <h1>현재 카운트 : {count}</h1>}
      //주의!
      //count가 false일 경우
      //<div> 0 </div>로 출력됨
    </div>
  );
}

 

inline-if-else

//삼항연산자
condition ? true : false

function UserStatus(props){
  return (
    <div>
      이 사용자는 현재 <b>{props.isLoggedIn ? '로그인' : '로그인하지 않은'}</b> 상태입니다.
    </div>
  )
}

//element삼항연산자
function LoginControl(props){
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const handleLoginClick = () => {
    setIsLoggedIn(true);
  }
  const handleLogoutClick = () => {
    setIsLoggedIn(false);
  }
  
  return(
    <div>
      <Greeting isLoggedIn = {isLoggedIn} />
      {isLoggedIn 
        ?      
        <LogoutButton onClick = {handleLogoutClick} />
        :
        <LoginButton onClick = {handleLoginClick} />
      }
    </div>
  )
}

 

Component 렌더링 막기 : null을 리턴하면 렌더링되지 않음

function WarningBanner(props){
  if (!props.warning){
    return null;
  }
  return(
    <div>경고</div>
  );
}

function MainPage(props){
  const [showWarning, setShowWarning] = useState(false);
  const handleToggleClick = () => {
    setShowWarning(prevShowWarning => !prevShowWarning);
  }
  return(
    <div>
      <WarningBanner warning = {showWarning}>
      <button onClick = {handleToggleClick}>
        {showWarning ? '감추기' : '보이기'}
      </button>
    </div>
  )
  
}

 

(실습) 로그인 여부를 나타내는 툴바 만들기

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

const styles = {
    wrapper: {
        padding: 16,
        display: "flex",
        flexDirection: "row",
        borderBottom: "1px solid grey",
    },
    greeting:{
        marginRignt: 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;

//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
root.render(
  <React.StrictMode>
    <Landingpage />
  </React.StrictMode>
)