[Vue.js] - Vue 반복문 v-for 사용해서 리스트 랜더링 하는 방법

#Vue v-for문으로 리스트 랜더링 하는 방법

-Vue에서 `v-for` 디렉티브를 사용하여 리스트를 렌더링 할 수 있습니다.

`v-for`를 사용하면 Vue 데이터의 배열 또는 객체를 반복하여 요소를 생성할 수 있습니다.

 

 

#vue v-for 디렉티브 문법

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

items: 데이터 배열

item: 배열에 담긴 각각의 데이터

index: 배열 반복 횟수 0부터 시작

 

 

#`v-for` 디렉티브에서 `:key` 속성 뜻

`v-for` 디렉티브에서 `:key` 속성은 Vue에서 리스트 항목을 식별하는 데 사용되는 특수한 속성입니다. 각 항목에 고유한 키 값을 제공함으로써 Vue는 리스트의 변경을 효율적으로 감지하고 업데이트할 수 있습니다.

`:key` 속성을 사용하면 Vue는 각 항목의 내부 상태를 유지하고 재사용할 수 있습니다. 이를 통해 Vue는 항목을 추가, 삭제 또는 재정렬할 때 더 효율적으로 작동하며 성능을 향상시킵니다.

일반적으로 `:key` 속성에는 각 항목에 대한 고유한 식별자를 할당하는 것이 좋습니다. 이 식별자는 일반적으로 데이터 모델에서 제공되는 고유한 필드(예: `id`)를 사용하여 할당됩니다. 이렇게 하면 Vue가 각 항목을 식별하고 효율적인 업데이트를 수행할 수 있습니다.

`:key` 속성은 `v-for` 디렉티브와 함께 사용되어야 합니다. 일반적으로 `:key` 속성에는 문자열이나 숫자와 같은 유일한 값이 지정되어야 합니다. 인덱스(`index`)를 기본 식별자로 사용할 수도 있지만, 이는 권장되지 않습니다. 인덱스를 사용하면 항목이 추가, 삭제 또는 재정렬될 때 예상치 못한 동작이 발생할 수 있습니다.

따라서, `:key` 속성은 Vue에서 리스트 항목을 고유하게 식별하는 데 사용되며, 효율적인 업데이트를 위해 필요한 속성입니다.

 

-Vue.js 코드

<template>
    <div>
        <talbe>
            <thead>
                <tr>
                    <th>번호</th>
                    <th>과일명</th>
                    <th>가격</th>
                    <th>원산지</th>
                    <th>배송료</th>
                </tr>
            </thead>
            <tbody>
                <tr :key="index" v-for="(item, index) in itemList">
                    <td>{{ index+1 }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.price }}</td>
                    <td>{{ item.origin }}</td>
                    <td>{{ item.deliveryFee }}</td>
                </tr>
            </tbody>
        </talbe>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                itemList : [
                    {"name":"사과", "price":"2000", "origin":"korea", "deliveryFee":"2500"},
                    {"name":"두리안", "price":"3000", "origin":"china", "deliveryFee":"3500"},
                    {"name":"배", "price":"2500", "origin":"korea", "deliveryFee":"2500"},
                    {"name":"키위", "price":"2500", "origin":"japan", "deliveryFee":"4500"},
                    {"name":"바나나", "price":"4000", "origin":"korea", "deliveryFee":"2500"}
                ]
            };
        }
    }
</script>

<style scoped>
    table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }
    td, th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
    }
</style>

 

-Vue v-for문으로 리스트 랜더링 테스트