<aside> 💡 조건부 렌더링에 대해서 알아보자

</aside>

논리 연산자 활용하기

AND 연산자

import { useState } from 'react';

function App() {
  const [show, setShow] = useState(false);

  const handleClick = () => setShow(!show);

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

export default App;

show 값이 true 이면 렌더링을 진행하고, false 이면 렌더링을 하지 않는다.

OR 연산자

import { useState } from 'react';

function App() {
  const [hide, setHide] = useState(true);

  const handleClick = () => setHide(!hide);

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

export default App;

hide 값이 true 이면 렌더링을 하지 않고 false 이면 렌더링을 진행한다.

삼항 연산자

import { useState } from 'react';

function App() {
  const [toggle, setToggle] = useState(false);

  const handleClick = () => setToggle(!toggle);

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

export default App;

toggle 의 값이 참일 경우 ✅ 표시를 거짓일 경우 ❎표시를 렌더링한다.

렌더링되지 않는 값들

falsy 값들인 얘들은 렌더링이 되지 않는다

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;

반면 falsy 값중 정수 0 은 렌더링이 된다.

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

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

export default App;