[React] 조건부 렌더링 종류

🎀 AND 연산자

  return (
    <div>
      <button onClick={handleClick}>토글</button>
      {show && <p>보인다 👀</p>}
    </div>
  );

show값이 true일때 p태그를 렌더링한다.

🎀 OR 연산자

  return (
    <div>
      <button onClick={handleClick}>토글</button>
      {hide || <p>보인다 👀</p>}
    </div>
  );

hide 값이 true 이면 렌더링 하지 않고, false 이면 p태그를 렌더링 한다.

🎀 삼항 연산자 활용

  return (
    <div>
      <button onClick={handleClick}>토글</button>
      {toggle ? <p>✅</p> : <p>❎</p>}
    </div>
  );

toggle 의 값이 true일 경우엔 '✅'을, false일 경우에는 '❎'를 렌더링한다.

🎀 렌더링되지 않는 값

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로 렌더링 된다.

import { useState } from 'react';

function App() {
  const [num, setNum] = useState(0);

  const handleClick = () => setNum(num + 1);

  return (
    <div>
      <button onClick={handleClick}>더하기</button>
      {num && <p>num이 0 보다 크다!</p>}
    </div>
  );
}

export default App;

그래서 0을 false 1을 true라고 생각하고 렌더링을 시도하면
원하는 결과가 나오지 않을 수 있으니 주의해야 한다.