&& 연산자로 if 역할 대신하기

&& 연산자

좌 우 모두 true 면 true

true && false;
true && true;

 

자료형에서의 결과

true && '안녕';
false && '안녕';

 

이를 이용해서 간단한 삼항연산자를 대신할 수 있다.

 

 

function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>참이면 보여줄 HTML</p>
        : null
      }
    </div>
  )
} 

//위와 아래는 같은 기능을 한다.

function Component() {
  return (
    <div>
      {
        1 === 1 && <p>참이면 보여줄 HTML</p>
      }
    </div>
  )
}

 

왼쪽 조건식이 true면 오른쪽 JSX가 그 자리에 남으며

왼쪽 조건식이 false면 false가 남는다. 

(false가 남으면 HTML로 렌더링하지 않음)