[VueJS] 배열 데이터를 가지고 component 동적으로 추가하기

vueJS에서 배열 데이터를 가지고 component 동적으로 추가하는 방법에 대해 알아보자.

사실 제목만 가지고 유추할 수 있는데, v-for를 component template에 걸어서 사용하는걸 의미한다.

(다른 방식으로도 사용하는 방법이 있겠지만 본문에서는 배열 데이터를 가지고 v-for문법을 사용하여 다룬다.)

이러한 방법을 사용하는 이유가 있는데

어떤 기능을 개발하느냐에 따라 다르겠지만 배열데이터를 가지고 v-for문을 돌려서 화면에 뿌려주는데

그 하나하나가 독립적인 기능을 가지고 있다면 component를 동적으로 생성하여 작업을 해야할때 사용한다.

예제 코드를 통해 접해보자.

▷ 예제1) 동적 component 생성

<div id='it_list'>
	<button @click='add()'>목록 추가</button>
	<ul>
		<it-component v-for="it in its">
		</it-component>
	</ul>
</div>

Vue.component('it-component',{
	template: '<li v-on:click="mine()">it list</li>',
	methods:{
		mine : function(){
			console.log("record");
		}
	}
});

new Vue({
	el: '#it_list',
	data: {
		its : []
	},
	methods: {
		add : function(){
			this.its.push('it');
		}
	}
});

<it-component>를 v-for 문법의 대상으로 지정함으로써 배열의 개수만큼 component가 동적으로 생성된다.

이렇게 되면 각각 component별로 제어가 가능하다.

▷ 결과