리액트 조건부 렌더링 꿀팁

리액트에서 활용할 수 있는 조건부 렌더링에 대한 꿀팁

 

논리 연산자 활용하기

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 이면 렌더링 합니다.

728x90

삼항 연산자 활용하기

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;

위 컴포넌트에서 중괄호 안에 있는 값들은 모두 아무것도 렌더링하지 않습니다.

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;

num 값이 0일 때는 false 로 계산되니까 뒤의 값을 계산하지 않기 때문에

아무것도 렌더링 하지 않는 코드 같습니다.

하지만 앞에서 살펴봤듯이 숫자 0은 0으로 렌더링 되는데요.

그래서 처음 실행했을 때 숫자 0이 렌더링 되고

'더하기' 버튼을 눌러서 num 값이 증가하면 num이 0 보다 크다! 가 렌더링 됩니다.

그래서 이런 경우엔 아래처럼 보다 명확한 논리식을 써주는 게 안전합니다.

true 나 false 값은 리액트에서 렌더링 하지 않기 때문이죠!

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;