조건부 렌더링 - 주요 개념

애플리케이션의 상태에 따라 컴포넌트 중 몇 개만을 렌더링하기

• JS의 조건 처리와 같이 동작함
• if 조건절이나 삼항연산자 활용함

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

// 이렇게 써도 됨 (삼항연산자)
function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    {isLoggedIn ? <UserGreeting /> : null}  
  <GuestGreeting />;
    )
}

// 이렇게 써도 됨 (&& 연산자)
function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    {isLoggedIn && <UserGreeting />}  
  <GuestGreeting />;
    )
}