리액트 null을 활용해서 아무것도 렌더링 되지 않도록 하기

JSX에서 조건부 삼항연산자를 활용해서 아무것도 렌더링되지 않도록 할 수 있다.

조건이 거짓인 경우 null을 반환하해 렌더링을 생략하도록 만든다.

function Example({ showMessage }) {
  return (
    <div>
      {showMessage ? <p>Hello, World!</p> : null}
    </div>
  );
}

 

showMessage가 false이면 아무것도 렌더링되지 않는다.