하지만 이것보다 더 짧은 코드로 똑같은 작업을 할 수 있습니다. 다음과 같이 && 연산자를 사용해서 조건부 렌더링을 할 수 있습니다.

src/App.js

import React from 'react';
 
function App() {
  const name = '뤼왝트';
  return <div>{name === '리액트' && <h1>리액트입니다.</h1>}</div>;
}
 
export default App;

---

 

이렇게 코드를 작성하고 나면 브라우저에 아무것도 나타나지 않을 것입니다. 다시 name 값을 리액트로 설정하면 ‘리액트입니다.’라는 문구가 나타날 것입니다.

&& 연산자로 조건부 렌더링을 할 수 있는 이유는 리액트에서 false를 렌더링할 때는 null과 마찬가지로 아무것도 나타나지 않기 때문입니다. 여기서 한 가지 주의해야 할 점이 있는데요. falsy한 값인 0은 예외적으로 화면에 나타난다는 것입니다.

const number = 0;
return number && <div>내용</div>

이런 코드는 화면에 숫자 0을 보여 줍니다.