React 에서 자주 쓰이는 if문 패턴

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

// 위 아래는 같은 것
function App() {
  if ( true ) {
    return <p>참일 때 보여줄 HTML</p>
} else {
  return null;
  }
}

// 위 아래는 같은 것
function App() {
  return <p>참일 때 보여줄 HTML</p>
}
  return null;
  }
}

 

else를 생략해도 같은 뜻임을 이해할 수 있다.

 

2. JSX 안에서 쓰는 삼항 연산자 (ternary operator)

function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>참이면 보여줄 HTML</p>
        : null
      }
    </div>
  )
}

 

중첩 사용도 가능하다.

function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>참이면 보여줄 HTML</p>
        : ( 2 === 2 
            ? <p>안녕</p> 
            : <p>반갑</p> 
          )
      }
    </div>
  )
}

 

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

function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>참이면 보여줄 HTML</p>
        : null
      }
    </div>
  )
} 

function Component() {
  return (
    <div>
      { 1 === 1 && <p>참이면 보여줄 HTML</p> }
    </div>
  )
}

 

&& 논리 연산자는 좌항이 참이면 우항을 반환한다는 특성이 있다.

그리고 좌항이 거짓이면 좌항을 반환한다. 그런데 좌항은 반환할 게 없으므로, false로 평가되면 HTML을 렌더링 하지 않는다.

 

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>
  }
}

// 위와 같은 식을 아래와 같이 switch 문으로 중첩 가능
function Component2(){
  var user = 'seller';
  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>
  )
}

// 아래도 같은 내용. 변수로 따로 빼서 사용해도 됨.
var 탭UI = { 
  info : <p>상품정보</p>,
  shipping : <p>배송관련</p>,
  refund : <p>환불약관</p>
}

function Component() {
  var 현재상태 = 'info';
  return (
    <div>
      {
        탭UI[현재상태]
      }
    </div>
  )
}