Vue.js 리스트 처리: v-for 디렉티브 완벽 가이드

vue.js

Vue.js에서는 v-for 디렉티브를 사용해 배열, 객체, 숫자 범위 등 다양한 데이터를 반복 렌더링할 수 있습니다. 이 기능을 활용하면 동적으로 리스트를 생성하고, 효율적으로 관리할 수 있습니다.

 

---

 

1. v-for 기본 사용법

• 배열이나 객체의 각 항목을 반복 렌더링할 때 사용합니다.
• 각 항목에는 반드시 고유한 key 속성을 부여해야 하며, 인덱스 사용은 배열 순서 변경 시 예기치 않은 동작이 발생할 수 있으므로 지양합니다.

    {{ item.name }}




export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
    };
  },
};

 

---

 

2. 객체 반복 처리

• 객체의 프로퍼티를 반복할 때는 (value, key) in object 형태로 사용합니다.

    {{ key }}: {{ value }}




export default {
  data() {
    return {
      object: {
        a: 'Apple',
        b: 'Banana',
        c: 'Cherry',
      },
    };
  },
};

 

---

 

3. 숫자 범위 반복

• v-for="n in 5"와 같이 숫자 범위도 반복할 수 있습니다.

    Item {{ n }}

 

---

 

4. `` 태그 내 v-for

• 여러 요소를 그룹화하여 조건부 렌더링이 필요할 때 유용합니다.

      {{ item.name }}
      {{ item.description }}

 

---

 

5. v-if와 v-for 함께 사용

• 성능 저하 우려로 v-if는 v-for 아래에 두는 것이 권장됩니다.

    {{ item.name }}

 

---

 

6. key 속성의 중요성

• 각 항목에 고유한 key를 부여하면 Vue가 상태를 추적하고 DOM 업데이트를 효율적으로 관리할 수 있습니다.

 

---

 

7. 컴포넌트 반복 렌더링

• v-for로 컴포넌트를 반복 렌더링할 때도 key 속성을 꼭 지정해야 합니다.

import ItemComponent from './ItemComponent.vue';

export default {
  components: { ItemComponent },
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
    };
  },
};

 

---

 

8. 배열 변경 감지

• Vue는 push, pop, splice 등 배열 메서드를 통해 변경을 감지하고 UI를 자동으로 업데이트합니다.

      {{ item.name }}

    Add Item




export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
      ],
    };
  },
  methods: {
    addItem() {
      this.items.push({ id: this.items.length + 1, name: `Item ${this.items.length + 1}` });
    },
  },
};

 

---

 

9. 필터링 및 정렬 결과 표시

• computed 속성을 활용해 필터링·정렬된 리스트를 렌더링할 수 있습니다.

      {{ item.name }}





export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Banana' },
        { id: 2, name: 'Apple' },
        { id: 3, name: 'Cherry' },
      ],
      searchQuery: 'a',
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.name.toLowerCase().includes(this.searchQuery.toLowerCase()));
    },
  },
};

 

---

 

결론

Vue.js의 v-for 디렉티브는 배열, 객체, 숫자 범위 등 다양한 데이터 반복에 유용하며, key 속성으로 상태를 효율적으로 관리할 수 있습니다. 컴포넌트 반복, 배열 변경 감지, 필터링 및 정렬과 함께 사용하면 동적인 리스트 UI를 쉽게 구현할 수 있습니다.

 

[Vue] 뷰 리스트 처리

 

[Vue] 뷰 조건 처리 – v-if, v-else, v-else-if, v-show 완벽 정리