[Vue.js] v-if와 v-show의 차이

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다.

 

 Vue.js에서 프론트엔드 요소를 조건문으로 나타낼 때 v-if나 v-show를 사용한다. 그러나 이 두 가지의 차이점을 잘 몰랐기에 이번 기회에 정리하고자 한다.

 

 

v-if

---

 v-if="조건"으로 쓰면 조건의 참거짓에 따라 요소를 표시할지 안 할지는 컨트롤 할 수 있다.

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no!</h1>

 여러 가지 요소의 표시/비표시를 한꺼번에 컨트롤 할 때는 v-if를 <template>태그에 기재한다.

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

 조건이 참일 때에 <template> 요소 전체가 표시되며, 거짓일 때는 <template> 요소 전부가 비표시하게 된다.

 

 

v-show

---

 v-if와 동일하게 v-show="조건"이라고 쓰는 것으로 조건의 참거짓에 따라 그 요소를 표시하거나 표시하지 않거나 컨트롤 할 수 있다.

 v-if와의 차이점은 요소가 항상 DOM에 유지된다는 점이다. 즉, v-show는 요소 표시와 비표시 전환을 CSS로 바꾸는 것으로 실현한다.

<h1 v-show="awesome">Vue is awesome!</h1>
<h1 v-show="not awesome">Oh no!</h1>

 위 요소가 브라우저위에서 표시될때는 아래와 같이 되어 결과적으로 Hello!만이 표시된다.

<h1>Hello!</h1>
<h1 style="display: none;">Oh no!</h1>

 

 

어떤 것을 쓰는 것이 좋을까?

---

 v-if는 초기 표시 코스트가 낮은 대신에 SPA상에서 표시 전환을 위한 코스트가 비싸다. 그리고 v-show는 초기 표시의 코스트가 높은 대신에, 실질적 전환은 CSS에서 하므로 표시 전환에 필요한 코스트가 낮다고 할 수 있다.

 즉, 전환 빈도가 낮으면 v-if, 전환 빈도가 높으면 v-show을 사용하는 것이 좋다고 할 수 있다.

 다만 v-show의 경우 일부 display에서 지원하지 않는 경우가 있는데, 브라우저 사양을 잘 보고 사용하는 것을 추천한다.

---

참고자료

https://qiita.com/aqua_ix/items/61eac355f3c24d7676e1