Vue.js) 리스트 렌더링

1. 리스트 렌더링

Vue.js의 리스트 렌더링은 배열이나 객체 같은 데이터 구조를 기반으로 반복적인 HTML 요소를 생성할 수 있게 해 줍니다. 이를 통해 데이터의 항목 수에 따라 동적으로 렌더링 할 수 있습니다.

 

2. v-for로 엘리먼트에 배열 매핑

<template>
	<h3>엘리먼트 배열 매핑</h3>
	<ul>
		<li v-for="(fruit, index) in fruits" v-bind:key="index">
			{{ fruit }}-{{ index + 1 }}
		</li>
	</ul>
</template>

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

엘리먼트 배열 매핑

• Apple-1
• Banana-2
• Cherry-3

v-for 디렉티브를 사용하여 해당 배열을 반복하여 li 엘리먼트를 반복 생성할 수 있습니다. key 값은 고유한 값을 가집니다.

 

3. v-for 와 객체

<template>
	<h3>엘리먼트 객체 매핑</h3>
	<ul>
		<li v-for="fruit in newFruits" v-bind:key="fruit.id">
			{{ fruit.name }}-{{ fruit.id }}
		</li>
	</ul>
</template>

<script>

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

computed newFruits에서 fruits 배열을 map()으로 순회하고 객체를 만들어 return 하는 코드입니다.

[
    {
    	id: 0,
        name: 'Apple'
    },
    {
    	id: 1,
        name: 'Banana'
    },
    {
    	id: 2,
        name: 'Cherry'
    }
]

 newFruits 객체는 위와 같이 return 됩니다.

엘리먼트 객체 매핑

• Apple-0
• Banana-1
• Cherry-2

구조분해도 가능합니다.

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

 

4. 배열 변경 감지

<template>
	<button v-on:click="handler">Click</button>
	...
</template>

<script>
export default {
	data() {
		...
	},
	computed: {
		...
	},
	methods: {
		handler() {
			this.fruits.push('Orange');
		},
	},
};
</script>

• Apple-0
• Banana-1
• Cherry-2
• Orange-3

Click 버튼을 누를 때마다 Orange가 배열에 추가되고 렌더링 합니다. 

위 코드에서 사용한 push() 메서드 외에도 다양한 변이 메서드가 있습니다.

• 변이 메서드

메서드	의미
push()	배열의 끝 인덱스 뒤에 새로운 인덱스를 추가하여 반환
pop()	배열의 끝 인덱스를 제거하고 반환
shift()	배열의 첫 인덱스를 제거하고 반환
unshift()	배열의 첫 인덱스 앞에 새로운 인덱스를 추가하여 반환
splice()	인덱스를 이용하여 데이터를 추가하거나 빼거나 삭제하여 반환
sort()	배열을 정렬해서 반환
reverse()	배열을 뒤집어서 반환

 

• 배열 대체 메서드

메서드	의미
filter()	배열에서 조건에 부합하는 요소들만 추출하여 새 배열 반환
concat()	배열 요소들을 복사하여 새 배열 반환
slice()	배열 인덱스 범위를 지정하여 범위 안의 요소로 새 배열 반환

 

* 기존 배열을 새 배열로 대체하여도 고유한 값을 가지는 key 값을 이용하여 Vue.js에서 배열 전체를 다시 렌더링 하지 않고 추가된 부분만 렌더링 합니다.

 

 

추가 문서:

https://v2.ko.vuejs.org/v2/guide/list.html