[React] object 자료형을 응용한 enum

경우에 따라서 다른 HTML을 보여주고 싶은 경우에 조건문이나 삼항연산자를 이용하지 않고도 작성할 수 있습니다. 바로 enum type을 통해서입니다

enum object에 내가 보여주고 싶은 HTML을 다 담습니다. enum은 '열거형'이라는 의미입니다.

function Component() {
  let enter = 'state1';
  return (
    <div>
      {
        { 
           state1 : <p>A</p>,
           state2 : <p>B</p>,
           state3 : <p>C</p>
        }[enter]
      }

    </div>
  )
} 

object 자료형으로 HTML을 다 정리해서 담은 다음 마지막에 object{} 뒤에 [] 대괄호를 붙여서 "key값이 enter인 자료를 뽑겠습니다" 라고 써놓은 것입니다.

이 enter라는 변수의 값에 따라서 원하는 HTML을 보여줄 수 있습니다. 만약에 let enter가 'state1'면 state1 항목에 저장된

태그가 보여질 것이고, 'state2'라면 state2 항목에 저장된

태그가 보여지게 됩니다.

object는 아래의 예처럼 변수에 놓고 저장해서 사용이 가능합니다.

let 변수 = { 
  state1 : <p>A</p>,
  state2 : <p>B</p>,
  state2 : <p>C</p>
}

function Component() {
  let enter = 'info';
  return (
    <div>
      {
        변수[enter]
      }
    </div>
  )
}