조건부 렌더링
이번 챕터는 04. v-for 를 이용한 리스트 렌더링 챕터와 이어집니다.
이전 챕터에서 리스트를 렌더링하는 방법을 배웠습니다. 그런데 아래 사진을 보시면 N 딱지와 같이 유동적인 요소가 있습니다. 이런 유동적인 요소를 어떻게 렌더링 해줄지에 대해 알아보겠습니다.
v-if
먼저 v-if 디렉티브에 대해 알아보겠습니다. v-if 사용법은 아래와 같습니다.
Copy <div v-if="true">True</div>
<div v-if="false">False</div> v-if 는 조건에 해당하지 않다면 렌더링을 하지 않습니다. 결과 True 라는 태그는 렌더링이 되었고, False 태그는 렌더링이 되지 않았습니다.
v-else
v-else v-if 와 함께 이용할 수 있습니다. 앞의 조건이 성립하지 않는다면 else 조건이 동작합니다.
Copy <div v-if="false">True</div>
<div v-else>False</div> 앞의 조건이 성립하지 않았기 때문에 True 는 렌더링되지 않고 False 가 렌더링된 것을 확인할 수 있습니다.
v-show
v-if 와 결과는 같지만 동작하는 방식이 다른 v-show 라는 디렉티브가 있습니다. v-if 의 경우 조건이 성립하지 않을 경우 태그 자체를 렌더링 하지 않지만, v-show 는 렌더링은 하되 display: none 처리를 합니다.
Copy <div v-show="true">True</div>
<div v-show="false">False</div> 실습
위의 내용들을 바탕으로 N 딱지를 붙여보겠습니다. N 딱지의 경우 처음 렌더링 될 때 그릴지 말지가 결정되기 때문에 v-if 를 이용하여 component 를 구성해보겠습니다.
1. data 에 수정이 필요합니다.
isUpdate 라는 업데이트를 판단할 수 있는 값을 추가합니다.
Copy // App.vue
<script>
import Webtoon from "./components/Webtoon";
export default {
components: {
Webtoon
},
data() {
return {
webtoons: [
{
name: "햄스터와 그녀",
link: "http://webtoon.daum.net/webtoon/view/hamsterandher",
img:
"http://t1.daumcdn.net/webtoon/op/478cdf37f585607982ffa9e35b432e8503be8a54",
isUpdate: true
},
{
name: "프롬 스타",
link: "http://webtoon.daum.net/webtoon/view/fromstar",
img:
"http://t1.daumcdn.net/webtoon/op/a7fb953d722c1130bfc18440f7e3ce448ece57a1",
isUpdate: true
},
{
name: "위대한 로맨스",
link: "http://webtoon.daum.net/webtoon/view/greatromance",
img:
"http://t1.daumcdn.net/webtoon/op/a816281cb4df5c50a20ac386fd6e496643d0f085",
isUpdate: false
},
{
name: "빛나는 손을",
link: "http://webtoon.daum.net/webtoon/view/Hand",
img: "http://t1.daumcdn.net/cartoon/5913FCAC0234C50001",
isUpdate: false
}
]
};
}
};
</script> 2. N 딱지 태그를 구성합니다.
v-if 를 사용하여 isUpdate 값을 바탕으로 N 태그의 렌더링 여부를 결정합니다.
Copy <template>
<div>
<h2>Webtoon</h2>
<ul class="wrap">
<li class="item" v-for="(item, idx) in items" :key="{idx}">
<a :href="item.link" target="_blank">
<img :src="item.img">
<span class="tit">제목: {{item.name}}</span>
</a>
<span class="tag" v-if="item.isUpdate">N</span>
</li>
</ul>
</div>
</template> N 태그가 노출된 것을 확인할 수 있습니다. 스타일을 입혀보겠습니다.
Copy <style scoped>
h2 {
text-align: center;
}
a {
list-style: none;
text-decoration: none;
}
li {
list-style: none;
}
.wrap {
max-width: 450px;
width: 100%;
margin: 0 auto;
}
.item {
position: relative;
border-bottom: 1px solid #ebebeb;
margin-bottom: 25px;
}
.tit {
display: inline-block;
font-size: 18px;
font-weight: bold;
color: #000;
padding: 20px 15px;
}
img {
width: 100%;
background: #ebebeb;
border-radius: 4px;
}
.tag {
position: absolute;
left: 10px;
top: 10px;
padding: 5px 30px;
color: #fff;
border-radius: 4px;
background: #fc2332;
font-weight: bold;
}
</style> 마무리
실습을 마치고 나면 다음과 같은 의문이 들 수 있습니다. v-if, v-show 둘의 결과 동작이 같은데 둘 중 어떤것을 사용해야 좋을까요 ?
두 가지 모두 원하는 결과는 같습니다. 하지만 동작하는 방식이 다른데요, state 에 따라 보여졌다 안보여졌다하는 빈도가 많다면, v-show 를 이용하는 방법을 추천드립니다. v-if 의 경우 태그를 그렸다 지웠다 해야되기 때문에 브라우저가 많은 부담을 느낍니다. 하지만 이런 경우를 제외한다면 v-if 를 이용하는 것을 추천드립니다.
참고: 공식문
