[vue 번역] 조건부 렌더링 (Conditional Rendering)

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

v-if

v-if 디렉티브는 조건부로 블록을 렌더링하는 데 사용됩니다. 블록은 디렉티브의 표현식이 truthy 값을 반환할 때만 렌더링됩니다.

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

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 엘리먼트는 v-if 또는 v-else-if 엘리먼트 바로 뒤에 와야 합니다. 그렇지 않으면 인식되지 않습니다.

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 엘리먼트는 v-if 또는 v-else-if 엘리먼트 바로 뒤에 와야 합니다.

<template>에서의 v-if

v-if는 디렉티브이므로 단일 엘리먼트에 연결해야 합니다. 하지만 둘 이상의 엘리먼트를 토글하고 싶다면 어떻게 해야 할까요? 이 경우 보이지 않는 래퍼 역할을 하는 <template> 엘리먼트에서 v-if를 사용할 수 있습니다. 최종 렌더링 결과에는 <template> 엘리먼트가 포함되지 않습니다.

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

v-show

엘리먼트를 조건부로 표시하는 또 다른 옵션은 v-show 디렉티브입니다. 사용법은 대체로 동일합니다:

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

차이점은 v-show가 있는 엘리먼트는 항상 렌더링되어 DOM에 남아 있다는 것입니다. v-show는 단순히 엘리먼트의 display CSS 속성을 토글합니다.

v-show는 <template> 엘리먼트를 지원하지 않으며 v-else와 함께 작동하지 않습니다.

v-if vs. v-show

v-if는 "실제" 조건부 렌더링입니다. 왜냐하면 조건부 블록 내의 이벤트 리스너와 자식 컴포넌트가 토글 중에 적절하게 파괴되고 다시 생성되기 때문입니다.

v-if는 또한 지연(lazy)됩니다: 초기 렌더링 시 조건이 false이면 아무 작업도 수행하지 않습니다. 조건부 블록은 조건이 처음으로 true가 될 때까지 렌더링되지 않습니다.

이에 비해 v-show는 훨씬 간단합니다. 엘리먼트는 초기 조건에 관계없이 항상 렌더링되며 CSS 기반 토글만 수행합니다.

일반적으로 v-if는 더 높은 토글 비용을 가지는 반면 v-show는 더 높은 초기 렌더링 비용을 가집니다. 따라서 무언가를 매우 자주 토글해야 하는 경우 v-show를 선택하고, 런타임에 조건이 변경될 가능성이 거의 없는 경우 v-if를 선택하십시오.

v-if와 v-for

동일한 엘리먼트에서 v-if와 v-for를 함께 사용하는 것은 권장되지 않습니다. 자세한 내용은 스타일 가이드를 참조하십시오.

v-if와 v-for가 모두 동일한 엘리먼트에서 사용될 때, v-if가 먼저 평가됩니다.