※ 공식문서를 읽고 정리한 글입니다.

컴포넌트의 조건부 출력

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

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

• 자바스크립트의 조건문을 활용해 컴포넌트를 조건부로 출력 가능
  예문에서는 isLoggedin prop을 활용해 로그인 여부에 따라 다른 인삿말을 출력

조건문을 단축시키는 방법

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'];

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<Mailbox unreadMessages={messages} />);

• &&(논리곱) 또는 ||(논리합) 연산자를 활용해 코드를 단축시킬 수 있음
  예문에서는 unreadMessages의 길이가 0이면 h2태그 출력이 일어나지 않음

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

• 조건부 연산자를 활용해서도 렌더링 가능

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

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

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<Page />);

특정 상황에서만 컴포넌트를 렌더링 하고 싶으면 null을 사용해 조건 이외의 상황에서 렌더링을 방지할 수 있음

출처:
https://ko.reactjs.org/docs/conditional-rendering.html