And 연산자

목차

And 연산자

저번에 변수에 따라 레이아웃이 달라지는 삼항 연산자를 포스팅했었는데,

삼항연산자

import {useState} from 'react';
export default function App ()
{
  const [toggle, setToggle] = useState(false);
  
  function handleOnClick(){
    setToggle(!toggle);
  }
  
  return (
    <>
      <button onClick={handleOnClick}>On/Off</button>
      {toggle ?(
        <h1>Toggle On</h1>
        ):(
        <h1>Toggle Off</h1>
      )}
    </>
  );
};

이경우는 조건 true / false 상황 모두 나타낼 레이아웃이 있을 때 쓰는 상황이고,

만약에 True일 때만 레이아웃을 나타낼꺼라면,

import {useState} from 'react';
export default function App ()
{
  const [toggle, setToggle] = useState(false);
  
  function handleOnClick(){
    setToggle(!toggle);
  }
  
  return (
    <>
      <button onClick={handleOnClick}>On/Off</button>
      {toggle && (<h1>Toggle On</h1>)}
    </>
  );
};

{ 조건 && (<>레이아웃</>)}

이렇게 가면 된다.

끝