[Vue] v-for, List Rendering

Loop를 이용한 List Rendering

Loof 즉 특정 component를 반복하게 되면 화면을 쉽게 구성할 수 있습니다.

데이터를 준비

<template>
	<div class="content">
	  <span>Content Component</span>
	  <ChartApp v-for="(item, idx) in appInfos" :appInfo="item" :data-index="idx"></ChartApp>
	</div>
</template>
<script>
export default {
    name: "Content",
    components: {ChartApp},
	data() {
		return {
			appInfos: [
				{
					width: 200,
					height: 200,
					title: "App1",
					top: 0,
					left: 0
				},
				{
					width: 200,
					height: 200,
					title: "App1",
					top: 200,
					left: 200
				},
				{
					width: 400,
					height: 400,
					title: "App1",
					top: 600,
					left: 1000
				},
				{
					width: 400,
					height: 400,
					title: "App1",
					top: 1000,
					left: 600
				}
			]
		};
	}
}
</script>

Content component에 appInfo라는 배열을 props로 사요하고자 하는 하위 compoennt로 보냅니다.

v-for

Vue에서는 v-for라는 디렉티브를 이용하여 리스트를 렌더링할 수 있습니다.

<div v-for="(item, idx) in iterator" :key="idx"></div>

v-for를 통해 리스트 렌더링 되는 component는 항상 key라는 props 값의 전달이 필요합니다. 왜냐하면 Vue는 Vitrual DOM을 사용하는데 리스트 component에서 변경된 부분을 감지할 때 key 값을 이용해서 리스트 렌더링을 하기 때문입니다.