&&를 사용한 조건부 렌더링

&&로 설명되는 연산자 AND는 왼쪽과 오른쪽에 각각 하나씩 두 개의 표현식을 처리하는 피연산자입니다. 둘 다 평가하고 둘 다 true인 경우 true를 반환하고 다른 경우에는 false를 반환합니다.

expresion1 && expresion2

그러나이 정의는 불완전합니다. 더 정확하게 말하면 && 연산자는 왼쪽의 표현식을 처리하고 false이면 반환하고 true이면 오른쪽의 표현식을 고려하여 반환합니다.

Take care that javascript consider undefined null false 0 NaN "" as a falsy values.

따라서 React에서 이와 같은 조건부 렌더링을 볼 때 예상하지 못한 결과를 얻을 수 있습니다.

expresion && <Component />

왼쪽의 표현식이 잘못된 숫자( 0 또는 NaN )일 수 있는 경우 React는 이를 반환하고 화면에 렌더링하여 예상치 못한 결과를 제공합니다.

export default function App() {
  const [numPreferences, setnumPreferences] = React.useState(0);

  return (
    <div className="user-data">
      {numPreferences && <div>user name</div>}
    </div>
  );
}

모든 javascript 거짓 값의 예를 들 수 있습니다see here.