Vue(version 3) 주요 기능 정리(v-for) #3

vuejs 기능 중 v-for에 대한 기능을 설명합니다.

v-for는 반복되는 Element를 구성할 때 자주 사용되는 기능입니다.

<template>

  <template v-for="user of UserList" :key="`user-${user.id}`">

    <div :id="user.id">

      {{ user.name }}

    </div>

    <span>{{ user.email }}</span>

  </template>

</template>

<script setup lang="ts">

interface User {

  id: string

  name: string

  email: string

}

const UserList = reactive<User[]>([

  { id: 'test1', name: '테스트1', email: 'test1@test.com' },

  { id: 'test2', name: '테스트2', email: 'test2@test.com' },

  { id: 'test3', name: '테스트3', email: 'test3@test.com' }

])

</script>

위 처럼 template 태그를 사용할 수 있고, 아니면 실제 태그(div, span, tr...) 로도 사용이 가능하다.
v-for의 중요한 점은 꼭 key를 지정해야 한다는 점이다. key를 지정하지 않으면 vuejs가 임의로 똑같은 key로 지정하는데,
나중에 화면 갱신을 한다던가, 재 랜더링 시에 오동작을 일으킬수 있는 요지가 있다.

그리고 v-if와 사용 시 주의가 필요한데, 

v-if와 v-for 주의사항

출처 : Priority A Rules: Essential | Vue.js (vuejs.org)

위 처럼 v-for와 v-if는 같은 Element에서 사용해서는 안되며, 필요할 경우 template를 사용해서 분리를 시켜줘야 한다.

 

v-for 요점 정리
1. 항상 key를 지정할 것!
2. v-if와 같이 사용하지 말 것!