[Vue] Conditional Rendering(v-if, v-show)

# v-if

표현식 값의 true/ false에 따라 요소를 조건부로 렌더링

v-else도 같이 쓸 수 있음

 

한번 써보기

const isSeen = ref(true)

<p v-if="isSeen">true일때 보여요</p>
<p v-else>false일때 보여요</p>
<button @click="isSeen = !isSeen">토글</button>

토글 클릭시 계속 바뀜

 

 

v-else-if도 사용 가능

<div v-if="name === 'Alice'">Alice입니다</div>
<div v-else-if="name === 'Bella'">Bella입니다</div>
<div v-else-if="name === 'Cathy'">Cathy입니다</div>
<div v-else>아무도 아닙니다.</div>

 

 

v-if는 directive이므로 단일 요소에만 연결 가능

여러개에 쓰려면 template요소에 v-if사용

<template v-if="name === 'Cathy'">
  <div>Cathy입니다</div>
  <div>나이는 30살입니다</div>
</template>

 

template 요소가 뭔데?

• 페이지가 로드될 때 랜더링되지 않았지만 JavaScript를 사용하여 나중에 문서에서 사용할 수 있도록하는 HTML을 보유하기위한 메커니즘
• 보이지 않는 wrapper역할을 함

 

---

 

근데, 비슷한 녀석이 하나 더 있음

# v-show

표현식 값의 true, false에 따라 요소의 가시성을 전환(visibility)

아까 v-if는 렌더링을 결정했었음

const isShow = ref(false)

<div v-show="isShow">v-show</div>

이런식으로 하면 당연히 안보임 

그런데 개발자도구로 보면

display:none으로 되어있음 == 랜더링은 진행함

 

# 둘이 비교

• v-if (Cheap initial load, expensive toggle)
  • 초기 비용이 false면 아무 작업도 없음
  • 토글이 힘들다
• v-show(Expensive initial load, cheap toggle)
  • 초기 조건에 관계없이 항상 렌더링
  • 초기 렌더링이 비용이 높다

그래서, toggle이 거의 없다면 v-if, toggle이 자주 일어난다면 v-show

+ elseif나 else를 사용한다면 v-if