[Vue.js] v-for 디렉티브: 배열을 리스트로 렌더링하기

<template>
  <div>
    <!-- 첫 번째 예제: 배열을 기반으로 리스트 렌더링 -->
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>

    <!-- 두 번째 예제: 인덱스와 함께 반복하기 -->
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ index + 1 }}. {{ item.name }}
      </li>
    </ul>

    <!-- 세 번째 예제: 객체의 속성을 반복하기 -->
    <ul>
      <li v-for="(value, key) in object" :key="key">
        {{ key }}: {{ value }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '사과' },
        { id: 2, name: '바나나' },
        { id: 3, name: '오렌지' }
      ],
      object: {
        name: '사과',
        color: '빨간색',
        quantity: 10
      }
    };
  }
};
</script>

<style scoped>
/* 컴포넌트에만 적용될 스타일을 작성할 수 있습니다. */
</style>

Vue에서 v-for 디렉티브를 사용하여 배열을 리스트로 렌더링하는 방법에 대해 알아봅시다.

첫 번째 예제에서는 배열을 기반으로 간단한 리스트를 렌더링합니다. v-for 디렉티브를 사용하여 items 배열을 반복하면서 각 요소의 이름을 출력합니다. :key 속성을 사용하여 Vue에 각 항목을 고유하게 식별할 수 있도록 합니다.

두 번째 예제에서는 반복하는 동안 인덱스를 함께 사용하는 방법을 보여줍니다. (item, index) 구문을 사용하여 각 아이템과 해당 인덱스를 가져올 수 있습니다. 이를 통해 리스트의 각 요소에 번호를 붙일 수 있습니다.

세 번째 예제에서는 객체의 속성을 반복하는 방법을 보여줍니다. (value, key) 구문을 사용하여 객체의 각 속성과 해당 값에 접근할 수 있습니다. 이를 통해 객체의 내용을 리스트로 렌더링할 수 있습니다.

이렇게 함으로써 Vue에서 v-for 디렉티브를 사용하여 배열을 리스트로 렌더링하는 다양한 방법을 익힐 수 있습니다.