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

🖍 조건부 렌더링

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>