[Vue] List Rendering(v-for)

# v-for

소스 데이터를 기반으로 요소 또는 템플릿 블록을 여러번 렌더링

 

구조는 "alias(별칭) in expression"의 형식

인덱스에 대한 별칭을 지정할 수 있음

<div v-for="item in items">
  {{ item.text }}
</div>

<div v-for="(item, index) in items"></div>

 

 

객체에서는 갯수에 따라 순서가 정해져있음

<div v-for="value in object"></div>
<div v-for="(value, key) in object"></div>
<div v-for="(value, key, index) in object"></div>

 

 

 

1. 배열에서 v-for

<div v-for="(item, index) in myArr">
  {{ index }} // {{item.name}}
</div>

div가 두개 랜더링됨

2. 객체에서 v-for

<div v-for="(value, key, index) in myObj">
  {{ index }} / {{ key }} / {{ value }}
</div>

 

 

3. template에서 v-for

여러 요소를 한번에 반복하려면 template을 이용 → 포장해주자

<ul>
  <template v-for="item in myArr">
    <li>{{ item.name }}</li>
    <li>{{ item.age }}</li>
    <hr>
  </template>
</ul>

 

 

4. 중첩 v-for

각 v-for 범위는 상위 범위에 접근 가능

const myInfo = ref([
  { name: 'Alice', age: 20, friends: ['Bella', 'Cathy', 'Dan'] },
  { name: 'Bella', age: 21, friends: ['Alice', 'Cathy'] }
])

<ul v-for="item in myInfo">
  <li v-for="friend in item.friends">
    {{friend}}
  </li>
</ul>

 

 

 

---

반드시, v-for와 key는 함께 사용해야한다!

데이터의 예측 가능한 행동을 유지

 

# key?

각 요소에 대한 고유한 값을 나타낼 수 있는 식별자여야 한다

let id = 0

const items = ref([
  { id: id++, name: 'Alice' },
  { id: id++, name: 'Bella' },
])

 

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

 

사실 key가 있던 없던 당장 보이는 차이는 없다

하지만, view의 내부 처리에 아주 중요한 요소이므로 써줘야한다.

 

※ v-for의 key를 배열의 인덱스는 쓰지 말기

→ 인덱스는 식별자가 아닌 배열 항목의 위치만을 나타내기 때문에

중간에 새로운 항목이 삽입되는 등의 상황이 발생하면 문제가 생김

직접 고유한 값을 만들어내는 메서드를 만들거나, 외부 라이브러리 등을 활용하는 등 식별자 역할을 하는 값을 넣자

 

 

# v-for와 v-if 같이 쓰지 않기

동일요소에는 같이 쓰지 않는다

왜? 동일 요소에서는 v-if가 v-for보다 우선순위가 높기 때문에

 

 

그럼 어떻게 같이 쓰냐?

→ v-for와 template를 같이 써서 v-if를 안에 써줌

<template v-for="item in items" :key="item.id">
  <li v-if="!todo.isCompelte"></li>
  {{ todo.name }}
</template>

 

 

---

원본 배열이 안바뀌게 조심할 것

예를 들어 push, pop, shift, unshift, splice, sort, reverse 등의 메서드들은 원본 배열을 수정함

그러므로 filter, concat, slice등의 원본 배열을 수정하지 않고 새 배열을 반환하는 메서드를 쓰거나

computed를 사용하자