(React) 리액트에서 if문 사용하는 5가지 방법

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

function Component() {
  if ( 조건문 ) {
    return <p>참이면 보여줄 내용</p>;
  } 
  return null;
} 

2. JSX안에서 쓰는 삼항연산자

function Component1() {
  return (
    <div>
      {
        조건문 ? <p>참이면 보여줄 내용</p> : null
      }
    </div>
  )
} 
function Component2() { //중첩삼항연산자
  return (
    <div>
      {
        조건문1 ? <p>참이면 보여줄 내용</p> 
        : ( 조건문2 ? <p>조건문1은 거짓, 조건문2는 참일때 보여줄 내용</p> 
        : <p>조건문1,2 모두 거짓일때 보여줄 내용</p> 
          )
      }
    </div>
  )
} 

3. && 연산자로 if 역할 대신하기

function Component() {
  return (
    <div>
      { 조건식 && <p>참이면 보여줄 내용</p> }
    </div>
  )
}

👉 조건식이 true면 내용이 남는다.
조건식이 false면 false가 남는다. (자바스크립트 개념, boolean과 자료형의 비교)
false가 남으면 HTML로 렌더링하지 않는다(삼항연산자의 null과 같음)

4. switch / case 조건문

function Component(){
  switch (user){
    case 'seller' :
      return <h4>판매자 로그인</h4>
    case 'customer' :
      return <h4>구매자 로그인</h4>
    default : 
      return <h4>그냥 로그인</h4>
  }
}

5. object/array 자료형 응용

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