20. list rendering

내용

이 강의에서는 리스트를 렌더링하는 방법에 대해 배우게 됩니다.
리스트는 메뉴, 사용자, 게시물 등 여러 가지 용도로 사용되며 대부분의 애플리케이션에서 자주 사용됩니다.
배열의 항목을 루프를 돌면서 요소 목록을 렌더링하는 데 도움이 되는 방법을 살펴보겠습니다.

강의 리소스 섹션에서 초기 파일을 포함한 ZIP 파일을 제공하며, 이를 다운로드하고 파일을 해제한 후 편집기를 해당 파일로 지정하라고 안내합니다.

먼저 배열과 객체 배열을 다루는 예제를 통해 리스트를 렌더링하는 방법을 살펴봅니다.

배열을 루프로 처리할 때는 v-for 지시문을 사용해야 합니다.
이를 리스트 아이템에 적용하고, 표현식은 item in items 형식으로 사용됩니다.
여기서 item은 현재 반복 중인 항목을 참조하는 별칭이며, items는 루프를 돌릴 배열을 나타냅니다.

v-for를 사용하여 배열의 데이터를 출력할 때, 중괄호({{ }})를 사용하여 현재 항목의 값을 표시할 수 있습니다.
또한 지시문과 속성에도 반복되는 요소를 참조하는 데에 item 별칭을 사용할 수 있습니다.

배열의 인덱스 값을 가져오고 싶을 경우, 중괄호 안에 item을 괄호로 감싸고 다음에 인덱스를 출력하는 표현식을 추가할 수 있습니다.

다음으로, 객체 배열과 객체 속성을 다루는 방법을 배우고, v-for 지시문을 이용해 객체의 속성들을 루프로 처리하는 방법을 설명합니다.

마지막으로, 배열 내 항목의 위치가 변경될 때도 항목을 고유하게 식별할 수 있는 key 속성을 사용하는 방법을 소개하고, 해당 속성을 통해 더 복잡한 애플리케이션에서 항목의 이동을 추적하는 중요성을 강조합니다.

이러한 기본적인 리스트 렌더링 개념을 이해하면 더 복잡한 예제와 실제 상황에서 어떻게 활용할 수 있는지를 살펴볼 수 있으며, 강의 리소스 섹션에는 리스트 렌더링에 관한 공식 문서 페이지 링크가 제공되므로 참고할 수 있습니다.

index.html

<!DOCTYPE>
<html>

<head>
    <title>VueJS Course</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>
<div id="app">
    <ul>
        <li v-for="(bird, index) in birds" :class="bird" :key="bird">
            {{ bird }} - {{ index }}
        </li>
    </ul>

    <hr>

    <ul>
        <li v-for="person in people">
            <div>{{ person.name }}</div>
            <div>{{ person.age }}</div>
        </li>
    </ul>

    <hr>

    <ul>
        <li v-for="person in people">
            <div v-for="(value, key, index) in person">
                {{ key }}: {{ value }} - Index: {{ index }}
            </div>
        </li>
    </ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.6/vue.global.prod.min.js"></script>
<script src="app.js"></script>
</body>

</html>

app.js

let vm = Vue.createApp({
    data() {
        return {
            birds: ['Pigeons', 'Eagles', 'Doves', 'Parrots'],
            people: [
                { name: 'John', age: 20 },
                { name: 'Rick', age: 18 },
                { name: 'Amy', age: 33 }
            ]
        }
    }
}).mount('#app');

main.css

body{
    font-size: 20px;
    font-family: sans-serif;
}
ul{
    margin-bottom: 10px;
}

# 20. list rendering

# 내용

20. list rendering

내용