[Vue.js] 목록 렌더링(v-for 디렉티브)

📌 v-for

1. v-for 배열

v-for는 반복문을 사용하기 위한 디렉티브이다. 배열 또는 객체의 항목을 순차적으로 가져와 렌더링 할 수 있다.

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

• v-for="item in items" : items 배열에서 항목을 순차적으로 item에 할당.
• v-for=”(item, index) in items” : 배열 인덱스를 가져올 수 있다.
• 항목을 나열할 때 각 :key 속성에는 고유한 값을 지정해야한다. (id, index..)

이해를 돕기 위해 바로 예시를 살펴보자.

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

const items = reactive([
  { id: 1, message: 'Java' },
  { id: 2, message: 'HTML' },
  { id: 3, message: 'CSS' },
  { id: 4, message: 'JavaScript' },
]);

items 배열안에 있는 항목들을 나열하고 싶다.
'Java', 'HTML', 'CSS', 'JavaScript'를 나열한다고 가정했을 때, v-for로 반복을 실행해 쉽게 나열할 수 있다.

items안의 항목들을 순차적으로 item에 할당한다.
첫 번째 반복에서 item에는 items의 0번째 인덱스인 { id: 1, message: 'Java' }가 할당될 것이고,
두 번째 반복에서 item에는 items의 1번째 인덱스인 { id: 2, message: 'HTML' }가 할당된다.
...

이렇게 순차적으로 items안의 항목들을 item에 할당하기 때문에, {{item.message}}를 했을 때 'Java', 'HTML', 'CSS', 'JavaScript'가 순차적으로 출력된다.

2. v-for 객체

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

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

const myObject = reactive({
  title: '제목입니다.',
  author: '홍길동',
  publishedAt: '2016-04-10',
});

객체의 경우, 객체의 key가 key가 되고, 객체의 value가 value가 된다.

1-title-'제목입니다' 
2-author-'홍길동'
3-publishedAt-'2016-04-10'

이러한 결과가 출력될 것이다.

참고문헌

vue3 완벽 마스터 - 짐코딩 인프런 강의 참조