# vueJS에서의 가상돔 (= virtual DOM)

그동안 vueJS 응용프레임워크인 NuxtJS를 쓰면서도 가상돔이 무엇인지 한번도 궁금해한적이 없었던 저랍니다 하핳 :D
좋은 기회가 생겨 가상돔이 무엇인지 집중적으로 파헤쳐보게 되었어요 !

 

가상돔 = virtual DOM 이다. 제가 아는 지식 수준은 여기서 멈춰,,,,,버렸,,,,,,
그런 지난날의 나를 반성하며,, ㅎㅎ

분명 내가 모르진 않을텐데 내가 분명 사용했을텐데 !!!! - ㅁ - 하시는분들은 꼭 보시오 !

 

이미 vue를 사용했다면 vue에서 제공하고 있는 디렉티브를 다들 이용해보셨을꺼같아요.
vue 디렉티브인 v-for를 사용하면 내가 실제로 작성한 DOM은 하나인데 데이터 입력값에 의해 여러개의 DOM을 생성할 수 있는걸 보셨꺼에요 ! 그렇다면 당신은 이미 가상돔을 사용하고 있었다는 점......wow

<p class="color-dot" v-for="dot in colors"></p>

data(){
	return {
		colors : ["#fff", "#eee", "#ddd", "#ccc", "#bbb", "#aaa"]
	}
}

이렇게 p태그 하나만 작성해주면 우리의 vue는 알아서 v-for 디렉티브를 통해 data에 일치하는 값을 찾아 여러개의 DOM을 생성해줬던거죠 ㅎ.ㅎ 저는 몰랐는데 이것도 가상돔이라고 하더라구용 !