7. 조건부 렌더링

if 나 조건부연산자 같은 javascript 연산자로 현재 상태에 맞게 UI를 업데이트할 수 있습니다.

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

엘리먼트 변수

엘리먼트를 저장하기 위해 변수를 사용할 수 있습니다.

// 예시
 ...
 render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    } //button 변수에 엘리먼트 저장

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }

논리연산자 && 로 표현

//예시
function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 && //&&연산자 앞이 true일때만 렌더링
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

조건부 연산자로 표현

//예시
return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );

return null

//예시
function WarningBanner(props) {
  if (!props.warn) {
    return null; //null을 리턴하여 렌더링 막기
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}