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

강지원·2022년 1월 27일
0
post-thumbnail

경우에 따라서 다른 HTML을 보여주고 싶을 때
if문 여러개 혹은 연속된 삼항 연산자를 사용해줬어야 했다.
하지만 오늘 알게 된 enum object를 이용해 상황에 따른 HTML을 보여줄 수 있게 되었다.

1. 예시

현재 focusing이 info면 상품정보를,
focusing이 shipping이면 배송정보를,
focusing이 refund면 환불약관을 보여주려 한다.

focusing이란 변수를 만들어놓고 if문으로 focusing을 검사하는 문법을 써야할 것 같지만
자바스크립트 오브젝트 자료형에 내가 보여주고 싶은 HTML을 다 담는다.

function Component() {
  const focusing = 'info';
  return (
    <div>
      {
        { 
           info : <p>MAIN PAGE</p>,
           shipping : <p>DETAIL PAGE</p>,
           refund : <p>STYLE PAGE</p>
        }[focusing]
      }
    </div>
  )
} 

❗ JSX는 오브젝트에 담든, 어레이에 담든 아무 상관없다는 사실을 알아두자.

object 자료형으로 조건에 맞는 HTML을 작성 후
object{} 뒤에 [] 대괄호를 붙여서 "key값이 focusing인 데이터를 뽑아내겠다" 라고 쓰면
focusing 이라는 변수의 값에 따라서 원하는 HTML을 보여줄 수 있다.

ex) const focusing이 'info'면 info 항목에 저장된

태그가 보여진다.

2. object 자료형을 변수에 저장해 사용하는 방법

const uiObject = { 
  info : <p>MAIN PAGE</p>,
  shipping : <p>DETAIL PAGE</p>,
  refund : <p>STYLE PAGE</p>
}

function Component() {
  const focusing = 'info';
  return (
    <div>
      {
        uiObject[focusing]
      }
    </div>
  )
} 
profile
'Why' better than 'Yes'

0개의 댓글