Vue.js 문법 - 리스트 렌더링

 

v-for

 

- v-for 디렉티브를 사용하여 배열을 기반으로 리스트를 렌더링

- item in items 형태로 특별한 문법이 필요

- items는 원본 데이터 배열, item은 반복되는 배열 엘리먼트의 별칭

 

예제1

 

<!-- App.vue -->

<template>
  <ul>
    <li
      v-for="(fruit, index) in fruits"
      :key="fruit">
      {{ fruit }}-{{ index }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      fruits: ['Apple', 'Banana', 'Cherry']
    }
  }
}
</script>

 

결과

 

예제2

 

<!-- App.vue -->

<template>
  <ul>
    <li
      v-for="fruit in newFruits"
      :key="fruit.id">
      {{ fruit.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      fruits: ['Apple', 'Banana', 'Cherry'],
    }
  },
  computed: {
    newFruits() {
      return this.fruits.map((fruit, index) => {
        return {
          id: index,
          name: fruit
        }
      })
    }
  }
}
</script>

 

코드 이해하기

- computed 속성을 통해 정렬된(계산된) 배열을 반환

- 배열 데이터 내부에는 객체 데이터 (id, name)가 들어있음

- :key 값으로 배열의 아이템을 구분 가능한 고유한 속성(id)을 부여

 

---

 

shortid 패키지

 

# 각각의 아이디를 고유하게 만들어주는 패키지
$ npm i -D shortid

 

예제3

 

<!-- App.vue -->

<template>
  <ul>
    <li
      v-for="fruit in newFruits"
      :key="fruit.id">
      {{ fruit.name }}-{{ fruit.id }}
    </li>
  </ul>
</template>

<script>
import shortid from 'shortid'

export default {
  data() {
    return {
      fruits: ['Apple', 'Banana', 'Cherry'],
    }
  },
  computed: {
    newFruits() {
      return this.fruits.map(fruit => ({
          id: shortid.generate(),
          name: fruit
      }))
    }
  }
}
</script>

 

결과

 

객체 구조 분해

 

<template>
  <ul>
    <li
      v-for="{ id, name} in newFruits"
      :key="id">
      {{ name }}-{{ id }}
    </li>
  </ul>
</template>

 

- 예제3 <template> 부분을 객체 구조 분해를 통해 위와 같이 작성 가능

 

---

 

배열 변경 감지

 

변이 메소드

- Vue는 감시중인 배열의 변이 메소드를 래핑하여 뷰 갱신을 트리거 (반응성)

- 배열 데이터가 바뀌면 뷰가 갱신된다는 의미

 

래핑된 메소드

• push() - 배열 데이터 가장 마지막에 아이템을 삽입
• pop() - 배열 데이터 가장 마지막 아이템을 반환
• shift() - 배열 데이터 가장 앞에 아이템을 반환
• unshift() - 배열 데이터 가장 앞에 아이템을 삽입
• splice() - 인덱스를 이용해서 데이터를 삽입, 반환, 삭제
• sort() - 배열을 정렬
• reverse() - 배열을 뒤집어줌

 

배열 교체

- 변이 메소드는 호출된 원래 배열을 변경

- filter(), concat(), slice()와 같은 원래 배열을 변경하지 않고 항상 새 배열을 반환하는 메소드도 존재

- 이러한 메소드를 비-변이 메소드라 부름

- 비-변이 메소드로 작업할때 이전 배열을 새 배열로 바꿀수도 있다

 

/* 예제 */
example1.items = example1.items.filter(item => item.message.match(/Foo/))