본문 바로가기
Vue.js

조건부 렌더링

KimJye 2019. 1. 14. 01:05


v-if

예제 : 

<body>
<div id="app">
<p v-if="active">v-if 디렉티브 활성화</p>
<p v-else>디렉티브 활성화 안됨.</p>
<button @click="active = !active">버튼</button>
</div>

<script>
new Vue({
el: "#app",
data: {
active: true
}
});
</script>
</body>

결과 : 





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


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


예제 : 

<div id="app">
<p v-if="active">v-if 디렉티브 활성화</p>
<p v-else>디렉티브 활성화 안됨.</p>
<button @click="active = !active">버튼</button>

<template v-if="active">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
<template v-else>
<h1>Vue</h1>
<p>Vue 1</p>
<p>Vue 2</p>
</template>
</div>

결과 : 





# v-else-if


v-else-if는 이름에서 알 수 있듯, v-if에 대한 “else if 블록” 역할을 한다. 

또한 여러 개를 사용할 수 있다.

v-else와 마찬가지로, v-else-if 엘리먼트는 v-if 또는 v-else-if 엘리먼트 바로 뒤에 와야 한다.




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


예제 : 

<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-show는 <template> 구문을 지원하지 않으며 v-else와도 작동하지 않는다.




v-if vs v-show

v-if는 조건부 블럭 안의 이벤트 리스너와 자식 컴포넌트가 토글하는 동안 적절하게 제거되고 다시 만들어지기 때문에 “진짜” 조건부 렌더링.

v-if는 또한 게으르다. 초기 렌더링에서 조건이 거짓인 경우 아무것도 하지 않는다. 조건 블록이 처음으로 참이 될 때 까지 렌더링 되지 않는다.

비교해보면, v-show는 훨씬 단순하다. CSS 기반 토글만으로 초기 조건에 관계 없이 엘리먼트가 항상 렌더링 된다.

일반적으로 v-if는 토글 비용이 높고 v-show는 초기 렌더링 비용이 더 높다. 매우 자주 바꾸기를 원한다면 v-show를, 런타임 시 조건이 바뀌지 않으면 v-if를 권장.

예제를 실행하여 개발자 창을 보면, v-if는 <!---->로 처리되어 아예 렌더링이 되지 않고,  v-show는 실제로 코드는 삽입되지만 display: none 되어 스타일로 보이지 않도록 처리가 된다.

따라서 우리는 앞으로 조건에 따라만 실행하고 싶다면 v-if디렉티브를 사용하고, 코드는 있지만 스타일로 display: none 처리를 하고 싶다면 v-show 를 사용하는 것이 바람직하다.



v-if 와 v-for

v-if와 함께 사용하는 경우, v-for는 v-if보다 높은 우선순위를 갖는다. 자세한 내용은 리스트 렌더링 가이드를 확인.


저작자표시 비영리 변경금지

'Vue.js' 카테고리의 다른 글

이벤트 렌더링  (0) 2019.01.15
리스트 렌더링  (0) 2019.01.14
클래스와 스타일 바인딩  (0) 2019.01.14
MVVM, MVC 패턴  (0) 2019.01.08
Computed와 Watch  (0) 2019.01.08

'Vue.js' Related Articles

티스토리툴바