React 기본 문법 - 조건부 렌더링

다음으로 React 기본 문법 중 "조건부 렌더링"에 대해 알아보겠습니다.

1. React 기본 문법
   • 조건부 렌더링

React에서는 JSX 내부에서 if문이나 for문을 사용할 수 없지만, 삼항 연산자나 논리 연산자를 이용하여 조건에 따라 다른 컴포넌트를 렌더링하는 것이 가능합니다.

삼항 연산자를 사용한 예시

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

위의 예시에서 isLoggedIn 상태에 따라 UserGreeting 컴포넌트와 GuestGreeting 컴포넌트 중 하나가 출력됩니다.

논리 연산자(&&)를 사용한 예시

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

위의 예시에서 메세지가 있을 경우(unreadMessages.length > 0)에만 특정 메세지가 출력됩니다.

다음 주제로 넘어가도록 하겠습니다.