05. v-if, v-show 를 이용한 조건부 렌더링

state 값에 따라 다르게 렌더링하는 방법을 학습합니다.

조건부 렌더링

이번 챕터는 04. v-for 를 이용한 리스트 렌더링 챕터와 이어집니다.

이전 챕터에서 리스트를 렌더링하는 방법을 배웠습니다. 그런데 아래 사진을 보시면 N 딱지와 같이 유동적인 요소가 있습니다. 이런 유동적인 요소를 어떻게 렌더링 해줄지에 대해 알아보겠습니다.

다음 웹툰 페이지

v-if

먼저 v-if 디렉티브에 대해 알아보겠습니다. v-if 사용법은 아래와 같습니다.

<div v-if="true">True</div>
<div v-if="false">False</div>

v-if 는 조건에 해당하지 않다면 렌더링을 하지 않습니다. 결과 True 라는 태그는 렌더링이 되었고, False 태그는 렌더링이 되지 않았습니다.

조건에 해당하는 태그만 렌더링된다.

v-else

v-else v-if 와 함께 이용할 수 있습니다. 앞의 조건이 성립하지 않는다면 else 조건이 동작합니다.

<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 처리를 합니다.

<div v-show="true">True</div>
<div v-show="false">False</div>

실습

위의 내용들을 바탕으로 N 딱지를 붙여보겠습니다. N 딱지의 경우 처음 렌더링 될 때 그릴지 말지가 결정되기 때문에 v-if 를 이용하여 component 를 구성해보겠습니다.

1. data 에 수정이 필요합니다.

isUpdate 라는 업데이트를 판단할 수 있는 값을 추가합니다.

// 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 태그의 렌더링 여부를 결정합니다.

<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 태그의 노출을 확인

N 태그가 노출된 것을 확인할 수 있습니다. 스타일을 입혀보겠습니다.

<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>

style 을 입힌 N 태그 요소

마무리

실습을 마치고 나면 다음과 같은 의문이 들 수 있습니다. v-if, v-show 둘의 결과 동작이 같은데 둘 중 어떤것을 사용해야 좋을까요 ?

두 가지 모두 원하는 결과는 같습니다. 하지만 동작하는 방식이 다른데요, state 에 따라 보여졌다 안보여졌다하는 빈도가 많다면, v-show 를 이용하는 방법을 추천드립니다. v-if 의 경우 태그를 그렸다 지웠다 해야되기 때문에 브라우저가 많은 부담을 느낍니다. 하지만 이런 경우를 제외한다면 v-if 를 이용하는 것을 추천드립니다.

참고: 공식문