Vue 리스트 렌더링

 

- v-for

• v-for 디렉티브를 사용하여 배열을 기반으로 리스트 렌더링
• item in items 형태로 특별한 문법 필요
• items는 원본 데이터 배열이고 item은 반복되는 배열 엘리먼트의 별칭
• v-for 블록 안에서 부모 범위 속성에 대한 모든 권한이 있음
• 현재항목의 인덱스에 대한 두번째 전달인자 옵션 제공

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

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

• in 대신에 of를 구분자로 사용 가능

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

---

- v-for와 객체

• v-for를 사용하여 객체의 속성 반복 가능
• 객체를 반복할 때 순서는 Object.keys()의 키 나열 순서에 따라 결정
• 이 순서는 JavaScript 엔진 구현간에 일관적이지 않음

<ul id="v-for-object" class="demo">
  <li v-for="(value, name, index) in myObject">
    {{ index }}. {{ name }}: {{ 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')

---

- 상태 유지

• 데이터 항목의 순서가 변경된 경우 항목의 순서와 일치하도록 DOM 요소를 이동하는 대신 Vue는 각 요소를 적절한 위치에 패치하고 해당 인데긋에서 렌더링할 내용을 반영하는지 확인
• 각 노드의 id를 추적하여 재사용하거나 순서를 변경하는 등의 작업을 위해 각 아이템에 유알한 key 속성 부여
• v-for의 key는 객체나 배열처럼 기본타입이 아닌 값을 사용해서는 안됨. 대신 문자열이나 숫자를 사용

---

- 배열 변경 감지

• 변이 메소드
  • 원래 배열을 변경
  • 감시중인 배열의 변이 메소드를 래핑하여 뷰 갱신을 트리거함
  • push, pop, shift, unshift, splice, sort, reverse
    
    
• 배열 교체
  • 원래 배열을 변경하지 않고 새 배열을 반환
  • filter, concat, slice
  • 이전 배열을 새 배열로 바꿀 경우 Vue가 기존 DOM을 버리고 전체 목록을 다시 렌더링할 것으로 예상되지만,
    실제로 Vue는 DOM 요소 재사용을 최대화하기 위해 배열을 겹치는 객체를 포함하는 다른 배열로 교체

---

- 필터링/정렬된 결과 표시

• 원래 데이터를 실제로 변경하거나 재설정하지 않고, 배열의 필터링되거나 정렬된 버전 표시
• 이 경우 필터링되거나 정렬된 배열을 반환하는 computed 속성 사용

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

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

• computed 속성이 실행 가능하지 않은 상황( 예. 중첩된 v-for 루프 내부)에서는 메소드 사용

<ul v-for="numbers in sets">
  <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-if가 있는 v-for

• v-if와 v-for를 함께 사용하는 것은 권장하지 않음
• 동일한 노드에 있는 경우, v-if는 v-for보다 우선 순위가 높음. 즉, v-if 조건은 v-for 범위의 변수에 접근 불가
• v-for를 래핑(wrapping) 하는 태그를 사용하면 문제 해결 가능

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

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

---

- 고유한 ID 가져오기

• shortid package 설치
  • npm i -D shortid

import shortid from 'shortid';

export default {
  data() {
    return {
      fruits: [],
    };
  },
  computed: {
    newFruits() {
      return this.fruits.map((fruit) => ({
        id: shortid.generate(),
        name: fruit,
      }));
    },
  },
};

 

[ 참고자료 ]

https://v3.ko.vuejs.org/guide/list.html#v-for%E1%84%85%E1%85%A9-%E1%84%8B%E1%85%A6%E1%86%AF%E1%84%85%E1%85%B5%E1%84%86%E1%85%A5%E1%86%AB%E1%84%90%E1%85%B3%E1%84%8B%E1%85%A6-%E1%84%87%E1%85%A2%E1%84%8B%E1%85%A7%E1%86%AF-%E1%84%86%E1%85%A2%E1%84%91%E1%85%B5%E1%86%BC%E1%84%92%E1%85%A1%E1%84%80%E1%85%B5

리스트 렌더링 | Vue.js