2.4.4 AND 연산자(&&)를 사용한 조건부 렌더링

개발하다 보면 특정 조건을 만족할 때 내용을 보여 주고, 만족하지 않을 때 아예 아무것도 렌더링하지 않아야 하는 상황이 올 수 있습니다. 이럴 때도 조건부 연산자를 통해 구현할 수는 있습니다.

src/App.js

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

---

 

위 코드와 같이 null을 렌더링하면 아무것도 보여 주지 않습니다.