조건부 렌더링

조건부 렌더링은 특정 조건에 따라 다른 결과를 보여주는 것

if문 , 삼항 연산자 , 논리 연산자(&&)

 

if문

  if (isLoggedin) {
    return <h1>로그인 성공</h1>;
  }

  return (
    <>
      <h1>실패!</h1>
    </>
  );
}

 

삼항 연산자 true false에 따라 결과를 다르게 보여주는 것

export default function App() {
  const isLoggedin = false;
  return <div>{isLoggedin ? "로그인 성공" : "로그인 실패"}</div>;
}

 

 

논리연산자(&&)

해당 조건이 참일때만 보여주는 것

export default function App() {
  const isLoggedin = false;
  return <div>{isLoggedin && "로그인 성공" }</div>;
}