---
tags: vue
---

# 조건부 렌더링 & 리스트 렌더링

## 🖍 조건부 렌더링

### `v-if`

`v-if` 디렉티브는 조건에 따른 블록을 렌더링한다.
v-if는 디렉티브이기 때문에 하나의 엘리먼트에 추가해야 한다.

리액트 컴포넌트가 하나의 루트를 갖는것으로 이해하면될까?

하나 이상의 엘리먼트를 트랜지션하려면 보이지 않는 래퍼 역할을 하는 `<template>` 엘리먼트에 v-if를 사용할 수 있다. 리액트에서 React.Fragment와 같은 역할을 하는 것 같다. 최종 렌더링 결과에는 `<template>` 엘리먼트가 포함되지 않는다.

`v-if`, `v-else`, `v-else-if`가 있다.

### `key`의 역할

vue는 엘리먼트를 처음부터 리렌더링하지 않고, 재사용하면서 엘리먼트를 최대한 효율적으로 렌더링하고자 한다.

하지만, 이것을 의도하지 않을 때도 있다. 따라서 **`key` 속성을 추가하여, 두 엘리먼트는 완전히 별개이니 재사용하지 않아야 함을 알려야 한다.**
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">Hello!</h1>

### v-if vs v-show
- **v-if**
v-if는 이벤트 리스너와 자식 컴포넌트가 완전히 제거되거나 새로 생성되도록 한다. 또한, v-if는 **lazy**하다. 처음 렌더링될때 초기 조건이 false라면 조건 블락은 렌더링되지 않는다.

- **v-show**
초기 조건 여부와 관계없이 무조건 렌더링된다. 토글은 css의 display 속성을 변경시킴으로써 이루어지게 된다.

- 결론
v-if는 토글하는데 비용이 크고, v-show는 초기 렌더링하는데 비용이 크다. 따라서 토글이 많이 일어나는 경우는 v-show, 토글이 자주 안일어나고 조건이 자주 안변경될 것 같으면 v-if를 사용하면 된다.

### v-if와 v-for
**v-if와 v-for를 같이 사용하는것은 권장되지 않는다.**
만약 둘을 같이 사용한다면, **v-for가 더 우선순위가 높다.**

## 🖍 리스트 렌더링

### v-for
v-for을 이용해서 리스트를 렌더링하낟.
`item in items` 형태로 반복된다.

두 번째 인자에 인덱스가 전달된다.

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

### v-for with object

객체를 순회해서 보여줄 수 있다.

순서는 value, key, index이다.

<ul id="v-for-object" class="demo">
  <li v-for="(value, key, index) in object">
    {{ value }} - {{key}} - {{index}}
  </li>
</ul>    

const objectList = new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10',
    },
  },
});

### Maintaining State

- **`in-place patch`**
Vue가 v-for에서 렌더링된 엘리먼트의 목록을 갱신할 때, in-place patch 전략을 사용한다.

데이타의 순서가 변경되었을 때, DOM 엘리먼트를 옮기기보다는, 뷰는 엘리먼트를 적절한 위치에서 patch시키고, 해당 인덱스에서 렌더링할 내용을 반영하는지를 확인한다.

이 기본 모드가 효율적이지만, **리스트의 결과가 자식 컴포넌트 상태에 의존적이지 않고, 임시의 DOM 상태(e.g. form input values)에 의존하지 않을 때 적합하다.**

=> 왜❓

DOM은 개별 요소를 추적하고, 기존 엘리먼트를 재사용, 재정렬하기 위해 고유한 `key`를 각각 제공해야 한다. key는 고유한 아이디여야 하며, primitive type이어야 한다.

    <div v-for="item in items" v-bind:key="item.id">
      <!-- content -->
    </div>