React_17_조건부 랜더링

논리 연산자 활용하기

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 의 값이 참일 경우엔 '✅'을, 거짓일 경우에는 '❎'를 렌더링한다.

랜더링 되지 않는 값들

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;

중괄호 안에 있는 값들은 아무것도 랜더링되지 않는다.

하지만 아래 값들은 각각 0과 1을 랜더링한다.

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

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

조건부 랜더링할 때 주의할 점

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;

위 코드는 num 값이 0일 때는 false로 계산되어 뒤의 값을 계산하지 않는다.
그래서 아무것도 랜더링하지 않는 코드이다.
하지만 숫자 0은 0으로 랜더링된다.

그래서 위 코드는 처음 실행했을 떄 숫자0이 랜더링되고
더하기 버튼을 눌러 num값이 증가하면 'num이 0 보다 크다!'가 랜더링된다.

명확한 논리식을 써주는 것이 안전하다.

true값이나 false값은 react에서 랜더링하지 않기 때문이다.

import { useState } from 'react';

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

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

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

{(num > 0)} &&로 수정해준다.