[React] JSX 안에 && 연산자로 If-Else를 인라인으로 표현 (+조건부 연산자)

JSX 안에 && 의 연산자를 통해 mailbox의 읽지 않은 메시지의 길이가 0을 초과할때만 화면에 표시하도록 가능하다.c

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

참고로 javascript에서는  true && expression은 항상 expression으로 평가되고 false && expression은 항상 false로 평가 위에서 unreadMesages.length가 true라면 뒤의 조건을 출력하고, false라면 React에서는 무시한다.

조건부연산자인 condition ? true: false를 사용도 가능

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

아래도 가능! element를 조건부 연산자에서도 사용이 가능

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <LogoutButton onClick={this.handleLogoutClick} />
      ) : (
        <LoginButton onClick={this.handleLoginClick} />
      )}
    </div>
  );
}