리액트 - 조건부 렌더링

논리 연산자 활용하기

 

{show && <p>보인다 👀</p>}

show = true일때 p태그 렌더링

{hide || <p>보인다 👀</p>}

hide= false일때 p태그 렌더링

{toggle ? <p>✅</p> : <p>❎</p>}

toggle = true면 체크, false면 x 렌더링 

렌더링되지 않는 값들

function App() {
  const nullValue = null;
  const undefinedValue = undefined;
  const trueValue = true;
  const falseValue = false;
  const emptyString = '';
  const emptyArray = [];

  return (
    <div>
      <p>{nullValue}</p>
      <p>{undefinedValue}</p>
      <p>{trueValue}</p>
      <p>{falseValue}</p>
      <p>{emptyString}</p>
      <p>{emptyArray}</p>
    </div>
  );
}

export default App;

function App() {
  const zero = 0;
  const one = 1;

  return (
    <div>
      <p>{zero}</p>
      <p>{one}</p>
    </div>
  );
}

export default App;

0과 1을 렌더링