[처음 만난 리액트] 섹션 9. Conditional Rendering

Conditional Rendering

Condition

• 조건, 상태를 의미

Conditional Rendering

• 조건에 따른 렌더링
• 조건부 렌더링
• 어떠한 조건(조건문의 True, False)에 따라서 렌더링이 달라지는 것

function Greeting(props) {
    const isLogginedIn = props.isLoggedIn

    if (isLoggedIn) {
        return <UserGreeting />
    }
    return <GuestGreeting />
}

Javascript의 Truthy와 Falsy

• Truthy : Javascript에서 True는 아니지만 True로 여겨지는 값
• Falsy : Javascript에서 False는 아니지만 False로 여겨지는 값

// truthy
true
{} (empty object)
[] (empty array)
42 (number, not zero)
"0", "false" (string, not empty)

// falsy
0, -0 (zero, minus zero)
0n (BigInt zero)
'', "", `` (empty string)
null
undefined
NaN(not a number)

Element Variables

• 엘리먼트를 변수처럼 다루는 방법

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

  function LogginControl(props) {
      const [isLoggedIn, setIsLoggedIn] = useState(false_
  
      const handleLoginClick = () => {
          setIsLoggedIn(true)
      }
  
      const handleLogoutClick = () => {
          setIsLoggedIn(false)
      }
  
      let button
      if (isLoggedIn) {
          button = <LogoutButton onClick={handleLogoutClick} />
      } else {
          button = <LoginButton onClick={handleLoginClick} />
      }
  
      return (
          <div>
              <Greeting isLoggedIn={isLoggedIn}/>
              {button} // element를 변수처럼 저장
          </div>
      )
  }

Inline Conditions

• in + line : 해당 코드 안에 직접 기입
• 조건문을 코드 안에 집어넣는 것.

Inline if

• if문을 필요한 곳에 직접 집어넣어 사용하는 방법

• if문의 경우 && 연산자를 사용

  • 단축 평가 적용
    • true && expression → expression
    • false && expression → false

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

  • && 연산자를 사용할 때 조건문에 false expression을 사용하면 뒤에 나오는 expression은 평가되지 않지만, false expression의 결과 값은 그대로 나옴.

  function Counter(props) {
      const count = 0;
  
      return (
          <div>
              {count && <h1>현재 카운트 : {count}</h1>}
          </div>
      )
  }

• if else 문의 경우 ? 연산자를 사용

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

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

  function LogginControl(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>
      )
  }

• 컴포넌트의 생명주기에는 영향을 미치지 않음.

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

import React from "react";

const styles = {
    wrapper: {
        padding: 16,
        display: "flex",
        flexDirection: "row",
        borderBottom: "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>
    )
}

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