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와 같이 사용하지 말 것!

이 외에 자주사용되는 기능을 설명하면,

객체 순회

v-for는 객체의 키와 값도 순회할 수 있습니다.

<template>

  <div>

    <div v-for="(value, key) in user" :key="key">{{ key }}: {{ value }}</div>

  </div>

</template>

<script setup>

const user = {

  name: 'Alice',

  age: 30,

  email: 'alice@example.com'

};

</script>

설명:

• v-for="(value, key) in user": 객체의 키와 값을 순회.
• :key="key": 객체의 키를 고유 식별자로 사용.

필터링된 리스트 렌더링

<template>

  <ul>

    <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>

  </ul>

</template>

<script setup>

import { computed } from 'vue';

const items = [

  { id: 1, name: 'Item 1', visible: true },

  { id: 2, name: 'Item 2', visible: false },

  { id: 3, name: 'Item 3', visible: true }

];

const filteredItems = computed(() => items.filter((item) => item.visible));

</script>

설명:

• computed를 활용하여 필터링된 데이터만 렌더링.