[가이드] 조건부 렌더링 - 필수요소 | Vue

v-if

v-if 디렉티브는 조건에 따라 블록을 렌더링하기 위해 사용됩니다. 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링됩니다.

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

v-else와 함께 “else 블록”을 추가하는 것도 가능합니다.

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

 

<template>에 v-if을 갖는 조건부 그룹 만들기

v-if는 디렉티브기 때문에 하나의 엘리먼트에 추가해야합니다. 하지만 하나 이상의 엘리먼트를 트랜지션하려면 어떻게 해야할까요? 이 경우 우리는 보이지 않는 wrapper 역할을 하는 <template> 엘리먼트에 v-if를 사용할 수 있습니다. 최종 렌더링 결과에는 <template> 엘리먼트가 포함되지 않습니다.

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

 

v-else

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

<div v-if="Math.random() > 0.5">
  이제 나를 볼 수 있어요
</div>
<div v-else>
  이제는 안보입니다
</div>

v-else 엘리먼트는 v-if 엘리먼트 또는 v-else-if 엘리먼트 바로 뒤에 있어야 합니다. 그렇지 않으면 인식할 수 없습니다.

 

v-else-if

2.1.0+부터 새롭게 추가됨

 

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

 

key를 이용한 재사용 가능한 엘리먼트 제어

Vue는 가능한 한 효율적으로 엘리먼트를 렌더링하려고 시도하며 종종 처음부터 렌더링을 하지않고 다시 사용합니다. Vue를 매우 빠르게 만드는데 도움이 되는 것 이외에 몇가지 유용한 이점이 있습니다. 예를 들어 사용자가 여러 로그인 유형을 트랜지션할 수 있도록 허용하는 경우입니다.

<template v-if="loginType === 'username'">
  <label>사용자 이름</label>
  <input placeholder="사용자 이름을 입력하세요">
</template>
<template v-else>
  <label>이메일</label>
  <input placeholder="이메일 주소를 입력하세요">
</template>

위 코드에서 loginType을 바꾸어도 사용자가 이미 입력한 내용은 지워지지 않습니다. 두 템플릿 모두 같은 요소를 사용하므로 <input>은 대체되지 않고 단지 placeholder만 변경됩니다.

 

이것은 항상 바람직하지는 않습니다. 때문에 “이 두 엘리먼트는 완전히 별개이므로 다시 사용하지 마십시오.”라고 알리는 방법을 제공합니다. 유일한 값으로 key 속성을 추가하십시오.

<template v-if="loginType === 'username'">
  <label>사용자 이름</label>
  <input placeholder="사용자 이름을 입력하세요" key="username-input">
</template>
<template v-else>
  <label>이메일</label>
  <input placeholder="이메일 주소를 입력하세요" key="email-input">
</template>

<label> 엘리먼트는 key 속성이 없기 때문에 여전히 효율적으로 재사용 됩니다.

 

 

v-show

엘리먼트를 조건부로 표시하기 위한 또 다른 옵션은 v-show 디렉티브입니다. 사용법은 거의 동일합니다.

<h1 v-show="ok">안녕하세요!</h1>

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

 

v-if는 조건부 블럭 안의 내용에 따라 제거되고 만들어지고 v-show는 우선 렌더링이 되고 CSS 속성으로 감추고 보여 줍니다.
따라서 v-if는 토글 할 때의 비용이 높고,  v-show는 초기 렌더링 비용이 높습니다. 자주 바뀐다면 v-show, 바뀌지 않는다면  v-if를 권장합니다.

 

* 우선순위 : v-for > v-if > v-else-if > v-else