[vue3/composition API] v-for 사용하기 (feat. expect to have 'v-bind:key' error)

vue.js 강의를 듣거나 vue.js로 과제를 수행하다보면

가장 처음 접하게 되는 것이 v-for 일 것이다.

v-for 은 리스트 렌더링을 위해 쓰게 되는 명령어다.

 

배열 혹은 객체의 밸류 갯수 만큼 컴포넌트에 렌더링을 하고싶을 때,

퓨어 js 에서는 element를 forEach를 사용해서 반복해줘야 하는 번거로움이 있었다.

vue나 react 같은 프레임워크에서는 이런 과정을 생략하고 컴포넌트 내에서 간략하게 표현 할 수 있다.

 

1. 배열에서 v-for 사용하기

 

 testArr 를 사용해서 li를 랜더링 할 것이다.

코드는 다음과 같다. 

<template>
<ul class="test">
  <li>testArr로 v-for 연습</li>
  <li v-for="(value, index) in testArr" :key="index">{{ `${index} / ${value}` }}</li>
</ul>
</template>

<script setup>
  const testArr = ['arr1', 'arr2', 'arr3', 'arr4', 'arr5'];
</script setup>

  이때, v-for 안에 value는 기본으로 들어가야 하는 사항이다. index는 선택사항이긴 하지만 :key 바인딩을 할 때 필요하므로 그냥 넣어주도록 하자. :key는 필수적인 요소이다. vue 공식문서에 있는 예제를 보면 :key 없이 잘 랜더링 되는 것을 볼 수 있지만, 막상 vscode 에서 실행해보면 lint가 오류를 뱉어내는 것을 볼 수 있다. 그리고 공식문서에서 "key"를 제공하라고 명시하고 있기도 하니 꼭 넣어주자. 

 

문제는 이 :key에 어떤 값을 바인딩 해야하냐는 것인데...

이것은 하단에서 다시 살펴보기로 하고 우리는 일단 얼레벌레 렌더링부터 해보도록 하자. 

 

** 출력화면 **

 

 

2. 객체에서 v-for 사용하기

  배열과 객체의 차이점은 배열에 없는 key 값이 객체에 등장한다는 것이다. 이 kye는 위에서 말한 :key와는 다르다. 어쨌든, 코드를 보자.

<template>
<ul class="test">
  <li>testObj 로 v-for 연습</li>
  <li v-for="(value, key, index) in testObj" :key="key" :index="index">{{ `${index} / ${key} / ${value}` }}</li>
</ul>
</template>

<script setup>

const testObj = {
  key1 : 'value1',
  key2 : 'value2',
  key3 : 'value3',
  key4 : 'value4',
  key5 : 'value5',
};
</script>

v-for 안에도 똑같이 value, key, index를 바인딩 해줄 수 있다. 물론 생략하고 value와 key만 들어가도 괜찮다. 

:key는 필수적인 요소이기 떄문에 바인딩을 꼭 해주어야 하고,

:index는 객체의 index값을 바인딩 해주기 위해서 사용한 것이다. index 안쓰면 넣을 필요 없음. 

 

출력 화면은 다음과 같다. 

순서대로 index key value 이다.

 

 

3. :key 의 정체

  :key 없이 랜더링을 시도 해본다면, lint는 다음과 같은 오류를 뱉을 것이다. 

[vue/require-v-for-key]
Elements in iteration expect to have 'v-bind:key' directives.eslint-plugin-vue

해석 : 너.................:key 빼먹었더라...? 왜그랬어... 얼른 넣어.............................

 

:key에 대해 이야기를 하려면 

vue가 데이터를 가져와서 html에 뿌리는 과정을 이해해야 한다. 

우리는 arr 혹은 obj에 데이터를 넣어 랜더링을 했었다,

그런데 이 데이터의 내용이 바뀐다면? vue는 어떻게 데이터를 가져올까? 

 

1. 전부 다 다시가져온다.

2. 바뀐내용만 가져온다

 

정답은 2 이다. 변경된 내용만 싹 긁어서 데이터를 재배치 하고 다시 dom에 뿌려주는 방식인 것이다.

이것을 vue가 사용하는  "in-place patch" 전략 이라고 하는데, 자세한 내용은 공식문서를 훑어보길 바란다. 

 

https://v3-docs.vuejs-korea.org/guide/essentials/list.html#maintaining-state-with-key

리스트 렌더링 | Vue.js

 

그런데 이런 방식에 문제가 있다.

지금이야, 데이터를 고정된 형태로 사용했으니 별 문제가 없지만.......

배열이나 객체가 반응형으로 이루어져 있다면? 

ref, reactive 안에 들어가 있어 value가 계속해서 변동 된다면?

데이터가 꼬여버릴 수도 있는 것이다!!!!

 

그래서 vue 에게 힌트를 준다. 

데이터가 꼬이지 않게 '무엇을 기준으로' 데이터를 읽고 dom에 반영을 해줘야 하는지 말이다.

그래서 vue의 공식문서 상에는 '권장한다'라고 했지만 필수적으로 넣을 수밖에 없는 것이다.

프레임워크에서 반응형 데이터를 사용하지 않기란 매우 어려울 것이므로.......

 

좋은 예시를 넣어 둔 블로그를 소개한다.

https://goodteacher.tistory.com/525

v-for와 key

 

 

그렇다면 :key에 바인딩 해줘야 할 내용은 무엇일까?

value 값? key 값? index 값? 

 

고유하면서도 변하지 않는 속성을 바인딩 해주어야 한다고 한다.

그것이 객체에서는 key 값일 것이고, (key: value 쌍이 바뀌면 index값도 계속 변동될 것이므로 index를 바인딩하기에는 불안정하다고 본다.) 

배열에서는 index 값일 것이다.

 

그러니 v-for을 사용할 때에는 :key 를 꼭 넣어주기로 하자. 

 

 

느낀점: 기본기에 충실해야 한다. 기본기는 주로 공식문서를 통해 다질 수 있다. 

 

 

-끗!-