[Vue.js] Document 따라하기 - Conditional Rendering

v-if

디렉티브 v-if는 조건부로 블록을 렌더링 하는 데 사용된다. 블록은 디렉티브 표현식이 true 값을 반환하는 경우에만 렌더링 된다.

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

v-if

v-if

 

v-else

디렉티브 v-else를 사용하여 v-if에 대한 else 블록을 나타낼 수 있다.

<button @click="awesome = !awesome">Toggle</button>

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

v-else element는 v-if 또는 v-if-else element 바로 뒤에 와야 한다. 바로 뒤에 오지 않는다면 인식되지 않는다.

v-else

v-else

 

v-else-if

v-else-if는 이름에서 알 수 있듯, v-if의 else if 블록 역할을 한다. 여러 번 연결되어 사용될 수 있다.

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-else와 마찬가지로 v-else-if element는 v-if 또는 v-else-if element 바로 다음에 와야 한다.

v-else-if

v-else-if

 

v-if on <template>

v-if는 지시문(디렉티브)이므로 단일 element에 적용되어야 한다. 만약 둘 이상의 element를 토글 하려면 어떻게 해야 할까? 이런 경우엔 보이지 않는 wrapper 역할을 하는 <template> element에 v-if를 사용할 수 있으며 최종 렌더링 된 결과에는 <template> 요소가 포함되지 않는다.

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

v-else와 v-else-if 또한 <template>에 사용할 수 있다.

v-if on <template>

v-if on <template>

 

v-show

조건부로 element를 표시하는 또 다른 옵션은 v-show 디렉티브이다. 사용법은 대체로 동일하다.

<h1 v-show="ok">Hello!</h1>

v-if와의 차이점은 v-show를 사용한 element는 항상 렌더링 되어 DOM에 남아있다는 것이다. v-show는 element의 display css 속성만 토글 한다.

v-show

v-show

v-show는 <template> element를 지원하지 않으며 v-else와 상호작용하지 않는다.

 

v-if vs. v-show

v-if는 "실제" 조건부 렌더링이다. 왜냐하면 조건부 블록이 토글 될 때 블록 내 이벤트 리스너와 자식 component가 제거되거나 다시 생성되기 때문이다.

 

또한 v-if는 게으르므로(lazy), 초기 렌더링에서 조건이 false이면 아무 작업도 수행하지 않는다. 조건 블록은 조건이 처음으로 true가 될 때까지 렌더링 되지 않는다.

 

이에 비해 v-show는 훨씬 간단하다. Element는 css 기반 토글을 사용하여 초기 조건에 관계없이 항상 렌더링 된다.

 

일반적으로 v-if는 토글 비용이 더 높고 v-show는 초기 렌더링 비용이 더 높다. 따라서 매우 빈번하게 토글 해야 하는 경우 v-show를, 런타임 시 조건이 변경되지 않을 경우 v-if를 사용하는 것이 좋다.

 

v-if with v-for

암시적 우선순위로 인해 동일한 element에 v-if와 v-for을 사용하지 않는 것이 좋다. 자세한 내용은 링크 참조.

v-if와 v-for이 모두 동일한 element에 사용되면 v-if가 먼저 평가된다. 자세한 내용은 리스트 렌더링 가이드 참조.

 

관련 Repo

https://github.com/galaxyuliana/VueExercises/tree/master/first-vue-project/src/components/Exercise/05

 

참고자료

https://vuejs.org/guide/essentials/conditional.html