[Vue.js] 09. 리스트 렌더링

v-for로 엘리먼트에 배열 매핑하기

배열을 기반으로 리스트를 렌더링 할 수 있다.

v-for 디렉티브는 item in items 형태로 특별한 문법이 필요하다.

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

Vue.createApp({
  data() {
    return {
      items: [{ message: 'Foo' }, { message: 'Bar' }]
    }
  }
}).mount('#array-rendering')

 v-for에서 배열 데이터를 사용할 때 item 부분에 매개변수를 2개 사용할 수 있는데,

첫번째 매개변수는 데이터의 내용을, 두번째 매개변수는 데이터의 인덱스를 나타낸다.

in 대신에 of를 구분자로 사용할 수도 있다.

<div v-for="item of items"></div>

 

v-for와 객체

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

  <ul
    id="v-for-object"
    class="demo">
    <li
      v-for="value in myObject"
      :key="value">
      {{ value }}
    </li>
  </ul>

Vue.createApp({
  data() {
    return {
      myObject: {
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2016-04-10'
      }
    }
  }
}).mount('#v-for-object')

두번째 전달 인자는 key값을 전달한다.

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

세번째 전달인자는 index값을 전달한다.

 

상태 유지

Vue가 v-for에서 렌더링 된 엘리먼트 목록을 갱신할 때 기본적으로 "in-place patch" 전략을 사용한다.

데이터 항목의 순서가 변경된 경우 항목의 순서와 일치하도록 DOM 요소를 이동하는 대신,

각 요소를 적절한 위치에 패치하고 해당 인덱스에서 렌더링 할 내용을 반영하는지를 확인한다.

 

이 기본 모드는 효율적이지만, 목록의 출력 결과가 하위 컴포넌트 상태 또는 임시 DOM(ex: form input)에 의존하지 않는 경우에 적합하다.

 

각 노드의 id를 추적하여, 재사용하거나 순서를 변경하는 등의 작업을 위해 각 아이템에 유일한 key 속성을 주어, vue에게 힌트를 줄 수 있다.

 

즉 각 배열을 실제로 일렬로 나열하기 보다는 key 속성을 통해서 여러곳에 흩어진 배열의 배치를 정하는 방식을 택한다.

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

가급적이면 항상 v-for에 key를 추가하는 것이 좋다.

 

key는 Vue가 노드를 식별하는 일반적인 메커니즘이므로 다른 용도로도 사용된다.

참고) 특별한 속성들 | Vue.js (vuejs.org)

특별한 속성들 | Vue.js

 

ID 고유화 하기

Vue.js에서는 배열의 id를 고유화 하는 방법이 따로 존재하지 않으므로 shortid 패키지를 이용한다.

npm i -D shortid

 

객체 구조분해 이용하기

v-for의 매개변수로 객체가 넘어오면, 객체 구조분해를 이용할 수 있다.

 

배열 변경 감지

변이 메소드

배열을 변화시킬 수 있는 메소드는 다음과 같다.

해당 메소드 들은 기존의 배열 자체를 변화시킨다.

- push()

- pop()

- shift()

- unshift()

- splice()

- sort()

- reverse()

 

배열 교체(비 변이 메소드)

원래 배열을 변경하지 않고 새로운 배열을 생성하여 반환하는 메소드.

- filter()

- concat()

- slice()

 

이를 통해 기존의 배열을 새 배열로 바꿀 수 있다.

Vue는 DOM 요소의 재사용을 최대화 하기 위해 전체 목록을 재 렌더링 하지 않고 변경된 부분만을 수정한다.

 

필터링/정렬된 결과 표시

배열을 필터링하거나 정렬한 결과를 computed 속성으로 만들 수 있다.

<li v-for="n in evenNumbers" :key="n">{{ n }}</li>

data() {
  return {
    numbers: [ 1, 2, 3, 4, 5 ]
  }
},
computed: {
  evenNumbers() {
    return this.numbers.filter(number => number % 2 === 0)
  }
}

computed 속성을 사용할 수 없는 경우는 다음과 같이 methods에 정의하면 된다.

<ul v-for="numbers in sets" :key="numbers">
  <li v-for="n in even(numbers)">{{ n }}</li>
</ul>

data() {
  return {
    sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
  }
},
methods: {
  even(numbers) {
    return numbers.filter(number => number % 2 === 0)
  }
}

 

범위가 있는 v-for

v-for에 정수 또한 사용이 가능하다. 이 경우 템플릿을 여러 번 반복한다.

<template>
  <div>
    <span
      v-for="n in 10"
      :key="n"> {{ n }}</span>
  </div>
</template>

 

<template>에서의 v-for

v-for 또한 template 태그를 사용할 수 있다.

 

v-if가 있는 v-for

동일한 노드에 있는 경우 v-if는 v-for보다 우선 순위가 높다.

즉, v-if 조건은 v-for 범위의 변수에 접근할 수 없다.

<!-- This will throw an error because property "todo" is not defined on instance. -->

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

v-for를 래핑하는 template 태그를 사용하면 문제를 해결할 수 있다.

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