React - 조건부 렌더링 하기 삼항연산자/논리연산자/변수 할당

React에서 조건에 따라서 렌더링 할 수 있는 방법이 3가지 있습니다.

 

삼항연산자 사용하기

isLogin 값이 true, false 값에 따라서 다른 화면을 렌더링 할 수 있습니다.

export default function Dev() {
  const [isLogin, setIsLogin] = useState(true);

  return (
    <div>
      {isLogin ? <p>로그인 되었습니다.</p> : <p>로그인이 필요합니다.</p>}
    </div>
  );
}

논리 연산자 사용하기

&& 연산자를 사용합니다.

isLogin 값이 true일 경우에만 렌더링 합니다.

export default function Dev() {
  const [isLogin, setIsLogin] = useState(true);

  return (
    <div>
      {isLogin && <p>로그인 되었습니다.</p>}
    </div>
  );
}

변수에 담아서 렌더링하기

조건에 따라서 렌더링 할 변수를 담아서 렌더링 할 수 있습니다.

JSX 구문이 좀 더 간단해지는 장점이 있습니다.

export default function Dev() {
  const [isLogin, setIsLogin] = useState(true);

  let message = <p>로그인 되었습니다.</p>;

  if (!message) {
    <p>로그인이 필요합니다.</p>;
  }

  return (
    <div>
      {message}
    </div>
  );
}

 

react에서는 3가지 방법을 이용해서 조건에 따라서 렌더링할 수 있습니다.

마음에 드는 방법으로 렌더링 하시면 됩니다.