그림 2-3 삼항 연산자 사용 결과

논리 연산자 &&를 사용하면 조건이 참일 때만 JSX 요소를 출력할 수 있습니다. 다음 코드에서 첫 번째 조건인 10 > 20은 거짓이므로 <h1>10이 20보다 크다</h1>는 렌더링되지 않습니다. 두 번째 조건인 10 < 20은 참이므로 해당 태그만 화면에 나타납니다.

<>
  {10 > 20 && <h1>10이 20보다 크다</h1>}
  {10 < 20 && <h1>10이 20보다 작다</h1>}
</>

그림 2-4 논리 연산자 && 사용 결과

TIP   <>...</>는 여러 요소를 하나로 묶을 때 사용하는 프래그먼트 단축 문법입니다. 자세한 내용은 2.2.1절에서 다뤘습니다.