[React] React if문 작성 패턴 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는 저렇게 오브젝트에 담든, array에 담든 아무 상관없다.

암튼 이렇게 object 자료형으로 HTML을 다 정리해서 담은 다음

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

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

만약에 var 현재상태가 'info'면 info 항목에 저장된 <p>태그가 보여질 것이고

만약에 var 현재상태가 'refund'면 refund 항목에 저장된 <p>태그가 보여진다.

혹은 더욱 간지나게 오브젝트를 변수로 저장해놓고 써도 무방하다.

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

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

https://codingapple.com/unit/react-if-else-patterns-enum-switch-case/