[Vue.js] 리스트 렌더링

 

1. 배열

 

가. 기본 문법

const items = ref([{ message: 'Foo' }, { message: 'Bar' }])

<li v-for="item in items">
  {{ item.message }}
</li>

배열을 리스트로 렌더링 할 수 있습니다.

 

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

현재 아이템의 index도 지원한다.

 

<li v-for="item in items">
  <span v-for="childItem in item.children">
    {{ item.message }} {{ childItem }}
  </span>
</li>

당연히 중첩 for문도 가능하다.

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

<template>을 이용할 수도 있다.

 

---

나. Destructuring Assignment

 

v-for는 JavaScript의 for문과 비슷하다.

<li v-for="({ message }, index) in items">
  {{ message }} {{ index }}
</li>

Destructuring Assignment(구조 분해 할당)도 사용할 수 있다.

 

---

2. 객체

<ul>
  <li v-for="value in myObject">
    {{ value }}
  </li>
</ul>

v-for는 객체의 속성을 반복하는 데 사용할 수도 있다.

 

<li v-for="(value, key) in myObject">
  {{ key }}: {{ value }}
</li>

index와 마찬가지로 key는 선택적으로 사용할 수 있다.

 

key에는 객체의 키값이 들어있다.

 

<li v-for="(value, key, index) in myObject">
  {{ index }}. {{ key }}: {{ value }}
</li>

원한다면 index까지도 사용할 수 있다.

 

단, 순서는 바뀌면 안된다.

 

---

3. 숫자 범위

<span v-for="n in 10">{{ n }}</span>

대신에 정수를 입력한 경우 1부터 주어진 정수까지 반복한다.

 

---

4. v-if와 v-for

 

v-if와 v-for를 함께 사용하는 것은 권장되지 않는다.

 

그래도 굳이 같이 사용하겠다면 조심할 점이 있다.

 

둘이 같은 노드에 존재할 때 v-if가 v-for보다 먼저 실행되기 때문에 v-if 조건문에서 v-for 변수에 접근할 수 없습니다.

 

<!--
"todo" 속성이 인스턴스에 정의되어 있지 않기 때문에 에러가 발생합니다.
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>

 

<template> 태그로 감싼 후, v-for를 옮겨서 해결할 수 있습니다:

<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

어쨌든 같은 노드에 함께 사용하지 말자.

 

---

5. key를 통한 상태유지

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.name }}
  </li>
</ul>

(items 배열의 각 항목은 id라는 고유한 속성을 가지고 있다고 가정. 없으면 만들어야 한다.)

 

가능한 한 언제나 v-for는 key 속성과 함께 사용하는 것을 권장한다.

 

• 역할
  : Vue.js에서 :key는 각 노드를 고유하게 식별하는 역할
  : 리스트에서 항목의 순서가 변경되거나 항목이 추가/제거될 때 각 항목을 올바르게 식별하고 상태를 유지하게 한다.
• 장점1
  : DOM 요소를 재사용하거나 순서를 변경할 수 있게 된다.
  : 만약 특정 조건에 따라 리스트의 항목 순서가 바뀌어야 할 경우, :key가 없다면 Vue는 전체 리스트를 다시 렌더링해야한다.
  : 하지만 각 항목에 고유한 :key가 있다면 필요한 항목만을 다시 렌더링하거나, 순서를 변경할 수 있어 효율적이다.
• 장점2
  : 사용자 입력이나 임시 상태를 유지하는 컴포넌트의 경우 :key가 없으면 컴포넌트의 상태가 예상치 못하게 변경될 수 있다.

 

참고로 여기서 :key는 v-bind와 결합되는 특수 속성이다. 객체의 키값을 가지고 있는 두 번째 alias key와는 다르다.

 

---