경우에 따라서 다른 HTML을 보여주고 싶을 때
if문 여러개 혹은 연속된 삼항 연산자를 사용해줬어야 했다.
하지만 오늘 알게 된 enum object를 이용해 상황에 따른 HTML을 보여줄 수 있게 되었다.
현재 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 항목에 저장된
태그가 보여진다.
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>
)
}