[vue.js] v-for에서 인덱스 사용하기, 해당 요소에서 인덱스 번호 가져오기!(feat.v-for :key)

프로그래밍을 하다보면 배열을 만나게된다.

진짜... 처음 보았을 땐 죽여버리고 싶을 정도로 짜증나는 녀석이었는데,

쓰다보니까 이 친구가 없었으면 어쨌을까 싶은 고마운 친구였다.

 

아무튼 이 배열이란건 프로그래밍을 하게 되면 어쨋든 배워야 되는 녀석인데,

오늘은 이 배열을 편하게 나열해주는 v-for에 대해서 이야기 해 보겠다.

 

---

그 동안 배열의 나열은 내가 배웠던 자바를 기준으로 이야기하자면

ArrayList<String> list = new ArrayList();

for(int i=0; i<list.length; i++) {
	System.out.println(list[i]);
}

//혹은

for(String str : list) {
	System.out.println(str);
}

이런 식으로 출력을 했었다.

 

위처럼 간단한 방법이 vue에도 있다.

 

바로 v-for문인데,

const listPreview = {
	picture : '(사진 url)';
}

<div class="listPreview" v-for="(item, index) in listPreview" :key="index">
	<span class="createPreview">{{ item.picture }}</span>
	<div class="deletePreview" @click="deletePreviewBtn" :index="index">
		x
	</div>
</div>

우리가 가지고 있는 데이터. 즉 listPreview에는 picture라는 내용만 있고 인덱스는 따로 설정되어 있지 않다.

하지만 v-for를 사용할 때

v-for="(item, index) in listPreview

위와 같이 (item(리스트 안의 요소), index)를 선언해준다면, 인덱스를 사용할 수 있다.

 

위의 코드는 프리뷰를 다 나열하고, 해당 프리뷰 옆에 x 버튼을 만들어,

누르면 해당 인덱스를 가진 요소가 삭제되도록 하는 코드다.

 

우리가 네이버 블로그 같은 곳에 사진을 업로드하면 하단에 첨부한 이미지들 프리뷰가 보이고, x를 누르면 사라지는 것과 비슷한 방법이다.

 

배열은 각자 인덱스를 가지고 있는데, 그 인덱스를 쓰게 해주는 개념이라고 생각하면 될 것 같다.

또한 바로 v-for문 옆에 :key가 보일텐데, 해당 부분이 중요하다.

 

Vue가 각 노드의 ID를 추적하고, 기존 엘리먼트를 재사용하고 재정렬할 수 있도록 힌트를 제공하려면 각 항목에 고유한 Key 속성을 제공해야 한다. 그럴때 사용하는 것이 :key 인데, 해당 값은 유니크한 것으로 해두는 것이 가장 좋다.

 

해당 기능은 vue 2.x부터 나왔는데, 없어도 문제는 안된다고 하지만 없으면 콘솔에서 v-bind:key를 넣어달라고 시끄럽게 굴기 때문에 있는 편이 마음 편하다.

아 ㅋㅋㅋㅋ이런거 절대 못보지 ㅋㅋㅋㅋㅋ

 

그래서 개인적으로는 index를 생성하고 index를 키로 잡아 두려고 하는데, 만약 index말고 해당 리스트의 요소로 키를 잡고 싶다면  

v-for="(item, index) in listPreview" :key="item.(요소이름)"

 위와 같이 설정 해 놓아도 가능하다.

 

index 이외에도 사용할 수 있는 것을 나열해보자면

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

key와 value가 있겠다. 기본적으로 배열이 가지고 있는 특성으로는 이 세 개는 괄호를 치고 써준다면 배열에 한해서는 바로 쓸 수 있다. 

 

---

아무튼 이렇게 프리뷰 이미지와 버튼을 만들고, 삭제하는 스크립트를 보겠다.

 

deletePreviewBtn(e) {
	const index = e.target.getAttribute('index');
	this.list.splice(index, 1);
},

const로 index를 따로 선언해 e.target.getAttribute('index');를 통해 index값을 가져왔다.

<div>의 x를 누르게 되면 @click으로 인해 이벤트가 발생하게되는데 이 이벤트 요소를 버튼의 파라미터로 받아오게 된다.(e가 아니라 event도 된다. 첫 요소로 이벤트를 받아오기 때문에 e는 원하는 이름이 가능하다.)

 

그리고 그 후 이벤트의 타겟으로 index를 가져온다. getAttribute는 각 항목마다 :index로 바인딩한 값("index")를 가져온다. 

<div class="deletePreview" @click="deletePreviewBtn" :index="index">
	x
</div>

여기서 "index"의 큰 따옴표가 없어도 적용이 되었는데, 왜 그런지는 잘 모르겠다.

양 쪽 다 테스트 결과는 잘 적용이 되었다. index의 출력도 잘 되었고.

 

아무튼 가져온 index 값을 index에 넣고, splice를 통해 해당 인덱스부터 1개 분량을 뜯어낸다.

이렇게 하면 미리보기 창의 요소를 삭제할 수 있다.

 

---

추가적으로, Vue가 배열의 변경을 감지할 수 있는 메소드들이 있다.

• push()
• splice()
• pop()
• shift()
• unshift()
• sort()
• reverse()

배열에서 위의 메소드를 사용하면 DOM에서 자동으로 반영하여 업데이트가 가능하다.

그렇기 때문에 splice를 통해 미리보기를 삭제해도 다른 요소들의 index들도 하나씩 당겨지며 연속해서 삭제가 가능해진다.