React에서는 어플리케이션의 상태에 따라 컴포넌트 중 몇 개만을 렌더링할 수 있도록 하기 위해, 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있음.

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

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

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);

위 코드는 isLoggedIn prop에 따라 다른 인사말을 렌더링

논리 && 연산자로 if를 인라인으로 표현하기

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

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);

&&를 넣어 주어진 조건에 따라 출력값을 결정할 수 있습니다.condition && expression 이 주어졌을 때, condition이 true라면 expression이 출력되고, condition이 false라면 false가 출력 됩니다.

조건부 연산자 사용하기

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

컴포넌트가 렌더링하는 것을 막기

만약 조건에 따라 렌더링을 원치 않는 경우, null을 반환하면 렌더링이 실행되지 않는다.

컴포넌트의 render 메서드로부터 null을 반환하는 것은 생명주기 메서드 호출에 영향을 미치지 않는다.