조건부 렌더링

Inline If with Logical && Operator

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

• 설정된 조건부 값이 일치 할 경우 && 뒤에 Operator 값이 작동
• 조건부 값이 false 일 경우 아무것도 작동되지않을 때 사용

  • 안좋은 예 (아래와 같은 경우에 사용)

    {unreadMessages.length > 0 ? (
      <h2>
        You have {unreadMessages.length} unread messages.
      </h2>
    	) : null
    }

Reference

https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator