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

## 조건부 렌더링 

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

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

![다음 웹툰 페이지](https://3068925918-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYGyJlfT4aHSW1TgIhy%2F-LZK9ZevxevuCf89gwvc%2F-LZK9yhoM--gYpLb1wnx%2Fimage.png?alt=media\&token=cc8e6649-2cf8-459f-be5b-0407cee858a8)

### v-if 

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

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

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

![조건에 해당하는 태그만 렌더링된다.](https://3068925918-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYGyJlfT4aHSW1TgIhy%2F-LZK9ZevxevuCf89gwvc%2F-LZKBgOYln3k23qFXYmV%2Fimage.png?alt=media\&token=5cd8a1ff-3c3b-4a80-9ea2-bfea61fe6d68)

### v-else

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

```javascript
<div v-if="false">True</div>
<div v-else>False</div>
```

![](https://3068925918-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYGyJlfT4aHSW1TgIhy%2F-LZK9ZevxevuCf89gwvc%2F-LZKBbX38UQ0Tqn48Bol%2Fimage.png?alt=media\&token=de788dfc-b1a3-4aaf-b48f-92b8bc8be6d5)

앞의 조건이 성립하지 않았기 때문에 True 는 렌더링되지 않고 False 가 렌더링된 것을 확인할 수 있습니다.

### v-show&#x20;

`v-if` 와 결과는 같지만 동작하는 방식이 다른 `v-show` 라는 디렉티브가 있습니다. `v-if` 의 경우 조건이 성립하지 않을 경우 태그 자체를 렌더링 하지 않지만, `v-show` 는 렌더링은 하되 `display: none` 처리를 합니다.

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

![](https://3068925918-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYGyJlfT4aHSW1TgIhy%2F-LZK9ZevxevuCf89gwvc%2F-LZKCIWZTqQYlJBuShPk%2Fimage.png?alt=media\&token=b1dbb99a-0c63-4923-be91-425c91cd16ba)

### 실습

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

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

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

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

```javascript
<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 태그의 노출을 확인](https://3068925918-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYGyJlfT4aHSW1TgIhy%2F-LZK9ZevxevuCf89gwvc%2F-LZKEWb2SZRu7GL54yn2%2Fimage.png?alt=media\&token=4ee529cd-5a16-4757-b178-94a5c677f2cb)

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

```javascript
<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 태그 요소](https://3068925918-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYGyJlfT4aHSW1TgIhy%2F-LZK9ZevxevuCf89gwvc%2F-LZKFRLFv4LewquLMyAL%2Fimage.png?alt=media\&token=d81ce5c9-a0c0-4eed-b48e-9cf86c42bd7d)

### 마무리&#x20;

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

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

참고: [공식문](https://kr.vuejs.org/v2/guide/conditional.html)