[Vue.js] v-for 디렉티브: "of" 구문 사용하기

<template>
  <div>
    <!-- 첫 번째 예제: "of" 구문을 사용하여 배열 반복하기 -->
    <ul>
      <li v-for="item of items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>

    <!-- 두 번째 예제: "of" 구문을 사용하여 객체 반복하기 -->
    <ul>
      <li v-for="value of objectValues" :key="value.id">
        {{ value }}
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 첫 번째 예제를 위한 배열 생성
    const items = [
      { id: 1, name: '사과' },
      { id: 2, name: '바나나' },
      { id: 3, name: '오렌지' }
    ];

    // 두 번째 예제를 위한 객체 생성
    const objectValues = {
      id1: { id: 1, name: '사과' },
      id2: { id: 2, name: '바나나' },
      id3: { id: 3, name: '오렌지' }
    };

    return { items, objectValues };
  }
};
</script>

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

Vue에서 v-for 디렉티브를 사용하여 "of" 구문을 이용해 배열과 객체를 반복하는 방법에 대해 알아봅시다.

첫 번째 예제에서는 "of" 구문을 사용하여 배열을 반복하고, 각 요소의 이름을 출력합니다. v-for 디렉티브에 "of" 구문을 사용하여 items 배열을 반복하고, 각 요소의 이름을 표시합니다.

두 번째 예제에서는 "of" 구문을 사용하여 객체의 값을 반복하고, 각 값(value)을 출력합니다. 객체(objectValues)의 속성을 반복하고, 각 속성의 값을 표시합니다.

"of" 구문은 JavaScript의 반복문 문법과 유사하게 작동하여, 배열이나 객체를 반복하는데 편리한 문법을 제공합니다. Vue에서 "of" 구문을 사용하면 코드를 더 읽기 쉽고 간결하게 만들어줍니다.