react에서 자주쓰는 if문 작성패턴 5개

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

function Component() {
  if ( true ) {
    return <p>참이면 보여줄 HTML</p>;
  } else {
    return null;
  }
}

컴포넌트에서 JSX를 조건부로 보여주고 싶으면 그냥 이렇게 쓸 수 있다!

return () 안의 JSX 내에서는 사용 불가능합니다.

<div> if (어쩌구) {저쩌구} </div> 이게 안된다는 거임.

그래서 보통 return + JSX 전체를 출력하는 if문을 작성해서 사용합니다.

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

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

JSX 내에서 if/else 대신 쓸 수 있다는게 장점.

삼항연산자는 그냥 if와는 다르게 JSX 안에서도 실행가능하며 조건을 간단히 주고 싶을 때 사용.

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

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

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

그래서 위의 예제 두개는 동일한 역할을 한다.

밑의 예제를 보시면 && 연산자로 조건식과 오른쪽 JSX 자료를 비교하고 있다.

이 때, 왼쪽 조건식이 true면 오른쪽 JSX가 그 자리에 남고,

왼쪽 조건식이 false면 false가 남는다.

(false가 남으면 HTML로 렌더링하지 않음)

4. switch / case 조건문

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

default는 맨 마지막 else 같은 거임.

5. object/array 자료형 응용

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

    </div>
  )
} 

object 자료형으로 HTML을 다 정리해서 담은 다음,

마지막에 object{} 뒤에 [] 대괄호를 붙여서 "key값이 현재상태인 자료를 뽑겠습니다" 라고 써놓는겁니다.

그럼 이제 현재상태라는 변수의 값에 따라서 원하는 HTML을 보여줄 수 있습니다.

var 탭UI = { 
  info : <p>상품정보</p>,
  shipping : <p>배송관련</p>,
  refund : <p>환불약관</p>
}

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

변수에 저장해서 사용할 수도 있음.