조건부 렌더링
이번 챕터는 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 를 이용하는 것을 추천드립니다.
참고: 공식문
