오브젝트 자료형을 응용한 enum

오브젝트 자료형을 응용한 enum

"경우에 따라서 다른 HTML을 보여주고 싶은 경우"

if문 여러개 혹은 삼항연산자 여러개를 작성해야겠죠? 근데 이렇게 작성할 수도 있습니다.
예를 들면 쇼핑몰에서 상품설명부분을 탭으로 만든다고 합시다.

그리고 경우에 따라서 상품정보 / 배송정보 / 환불약관 내용을 보여주고 싶은겁니다.
현재 state가 info면 <p>상품정보</p>
현재 state가 shipping이면 <p>배송정보</p>
현재 state가 refund면 <p>환불약관</p>
이런걸 보여주자는겁니다.

state를 만들어놓고 if문으로 state를 검사하는 문법을 써야할 것 같지만

이번엔 if문이 아니라 자바스크립트 오브젝트자료형에 내가 보여주고 싶은 HTML을 다 담습니다.

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

    </div>
  )
} 

▲ 원래 JSX는 저렇게 오브젝트에 담든, 어레이에 담든 아무 상관없습니다.
암튼 이렇게 object 자료형으로 HTML을 다 정리해서 담은 다음
마지막에 object{} 뒤에 [] 대괄호를 붙여서 "key값이 현재상태인 자료를 뽑겠습니다" 라고 써놓는겁니다.

그럼 이제 현재상태라는 변수의 값에 따라서 원하는 HTML을 보여줄 수 있습니다.
만약에 var 현재상태가 'info'면 info 항목에 저장된 <p>태그가 보여질 것이고
만약에 var 현재상태가 'refund'면 refund 항목에 저장된 <p>태그가 보여지겠죠?

아주 간단하고 직관적인 if문이 완성되었습니다.
이제 if/else 몰라도 코딩이 가능하겠군요
혹은 더욱 간지나게 오브젝트를 변수로 저장해놓고 쓰셔도 무방합니다.

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

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