[React] 오브젝트 자료형 enum 사용하기

기존

기존에 경우에 따라서 html을 보여줄 때 아래와 같은 삼항 연산자 표현방식으로 보여주었다.

{modalState === true && (
  <div className="my-alert">
  <p>재고가 얼마 남지 않았습니다!</p>
  </div>
)}

리액트에서는 자바스크립트 오브젝트자료형 으로 보여줄 수 있는 방법이 있다.

첫번째 방법

전역에 먼저 보여줄 값을 변수에 오브젝트 형식으로 담고
함수 안에서 사용할 변수를 생성해서 오브젝트 키값을 설정 해준다.
{ tabList[subject] }

const tabList = {
  info: <p>메뉴1</p>,
  shipping: <p>메뉴2</p>,
  refund: <p>메뉴3</p>
}

function App() {
  const subject = 'info'
  return (
    <div className="App">
    {
    tabList[subject]
    }
	</div>
   )
}

두번째 방법

함수 안에서 오브젝트형식으로 주고 키값을 변수로 선언

function App() {
  const subject2 = 'info'

  return (
   <div className="App">
 	{
       {
          info: <p>상품정보</p>,
          shipping: <p>배송관련</p>,
          refund: <p>환불약관</p>
        }[subject2]
      }
      
	}
	</div>
	)
}