JSX에서 && 연산자 사용하기

조건이 참일 때 텍스트를 삽입하고, 거짓일 때는 아무것도 하지 않아야 할 경우가 있습니다. 이는 && 연산자를 사용하여 수행할 수 있습니다.

예제를 통해 그 동작을 살펴보겠습니다. 다음 코드에서 show가 true이면 텍스트가 포함된 단락이 삽입되고, false이면 아무것도 삽입되지 않습니다:

jsxfunction App() {
  const show = true;
  
  return <div>
    {show && <p>text</p>}
  </div>;
}

jsxfunction App() {
  const isAuth = true;
  
  return <div>
    <p>로그인되었습니다</p>
  </div>;
}