JSX에서 단축 조건을 위한 역전

반대 상황도 있을 수 있습니다: 조건이 거짓일 때 텍스트를 삽입하고, 참일 때는 아무것도 하지 않아야 합니다. 이를 위해서는 ! 연산자를 사용하여 상수를 역전시켜야 합니다.

다음 예에서, hide가 false이면 텍스트가 있는 단락이 삽입됩니다:

jsxfunction App() {
  const hide = false;
  
  return <div>
    {!hide && <p>text</p>}
  </div>;
}

jsxfunction App() {
  const isAuth = false;
  
  return <div>
    <p>please log in</p>
  </div>;
}