[React] 19. if문 작성패턴

1. 컴포넌트 안에서 쓰는 if/else

function Component() {
  if ( true ) {
    return <p>true</p>;
  } else {
    return null;
  }
}

 

2. 삼항연산자

function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>true</p>
        : null
      }
    </div>
  )
}

 

3. && 연산자

function Component() {
  return (
    <div>
      { 1 === 1 && <p>true</p> }
    </div>
  )
}

 

4. switch/case 조건문

function Component2(){
  var user = 'seller';
  if (user === 'seller'){
    return <h4>판매자 로그인</h4>
  } else if (user === 'customer'){
    return <h4>구매자 로그인</h4>
  } else {
    return <h4>그냥 로그인</h4>
  }
}

 

5. object/array 자료형

function Component() {
  var 현재상태 = 'info';
  return (
    <div>
      {
        { 
           info : <p>상품정보</p>,
           shipping : <p>배송관련</p>,
           refund : <p>환불약관</p>
        }[현재상태]
      }

    </div>
  )
}