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

AND연산자(&&) : 두 조건 모두 참인 경우 참
OR 연산자(||) : 두 조건 중 하나 참인 경우 참

특정 조건을 만족할 때 내용을 보여 주고, 만족하지 않을 때 아무것도 랜더링하지 않아야 하는 상황이 생기면 조건부 연산자를 통해 구현할 수 ㄷ있다.

코드를 입력하세요import React from 'react';

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

export default App;

null을 랜더링하면은 아무것도 보여지지 않는다

import React from 'react';

function App() {
 cosnt name='리액트';
 return <div> {name === '뤼액트' && <h1>리액트입니다.</h1> } </div>;
 
 export default App;

브라우저에 아무것도 보이지 않는다.

name === '리액트' 

라고 설정하면, 리액트입니다. 가 랜더링될 것이다.

&& 연산자로 조건부랜더링을 할 수 있는 이유

리액트에서 false 를 랜더링할 때는 null 과 마찬가지로 아무것도 나타나지 않기 때문이다.