[Vuetify3] Data iterators

실무에서는 반복 데이터 표시, 정렬, 페이지네이션, 카드/리스트 출력 패턴에서 자주 사용됩니다.

---

1️⃣ 개요

• 역할: 반복 데이터를 리스트나 카드 형태로 렌더링할 때 사용되는 고급 컴포넌트
• 특징:
  1. v-for 없이도 반복 렌더링 가능
  2. pagination, sorting, filtering 내장 지원
  3. slot을 활용해 카드/리스트 등 자유로운 UI 구성 가능

---

2️⃣ 주요 Props

items	반복할 데이터 배열	데이터베이스/API에서 가져온 리스트
item-key	각 아이템 고유 키	v-for 없이 반복 렌더링 시 필수
items-per-page	한 페이지에 보여줄 아이템 수	페이지네이션 관리
pagination	현재 페이지/총 페이지 관리	실무: 테이블/카드 페이지네이션
sort-by / sort-desc	정렬 기준, 내림차순 여부	테이블/리스트 정렬
filter	필터링 함수	검색 기능 구현

---

3️⃣ Slot 구조

default	각 아이템 렌더링	카드, 리스트, 이미지 등 자유롭게 커스터마이징
item	단일 아이템 렌더링	기본 반복 구조, 버튼/아이콘 추가
footer	페이지네이션, 요약	하단 페이지네이션/총 데이터 수 표시
no-data	데이터 없을 때 표시	“검색 결과 없음” 메시지

---

4️⃣ 실무 예제

카드형 반복

 

<v-data-iterator
  :items="items"
  item-key="id"
  :items-per-page="6"
>
  <template #item="{ item }">
    <v-card class="ma-2" max-width="300">
      <v-img :src="item.image" height="180px"/>
      <v-card-title>{{ item.title }}</v-card-title>
      <v-card-text>{{ item.description }}</v-card-text>
    </v-card>
  </template>

  <template #footer>
    <v-pagination
      v-model="page"
      :length="Math.ceil(items.length / 6)"
    />
  </template>
</v-data-iterator>

• 장점: 반복, 페이지네이션, 정렬, 필터링을 한 번에 처리
• 실무: 상품 리스트, 게시물 목록, 이미지 갤러리

---

5️⃣ 실무 팁

1. 반복 데이터 표시: default 혹은 item slot 활용
2. 페이지네이션: items-per-page + footer slot으로 커스터마이징
3. 정렬/검색: sort-by와 filter를 props 또는 computed로 연결
4. 반응형 카드/리스트: slot 내부에 v-row/v-col 또는 v-card 조합

---

6️⃣ 핵심 요약

• 목적: 리스트나 카드 반복 + 정렬/검색/페이지네이션을 한 번에 처리
• 주요 Props: items, item-key, items-per-page, sort-by, filter
• 주요 Slot: item/default → 반복 아이템, footer → 페이지네이션, no-data → 빈 데이터
• 실무 활용:
  1. 카드/리스트 반복
  2. 페이지네이션 내장
  3. 정렬/검색 기능 적용 가능
  4. slot으로 자유로운 UI 구성

 

---

 

🔹 v-data-iterator vs  v-for + list/card 

✅  v-data-iterator

Vuetify에서 제공하는 데이터 표시 전용 고급 컴포넌트로,
데이터를 리스트 / 카드 / 커스텀 UI 형태로 반복 출력할 때 추가 기능을 내장하고 있음.

주요 특징

• 내장 기능
  • 페이지네이션 (Pagination)
  • 정렬 (Sorting)
  • 검색 (Filtering)
  • 슬롯 기반 커스터마이징
• 데이터 바인딩만 하면 자동으로 목록을 다룰 수 있음
• v-data-table의 단순화/커스터마이징 버전이라고 보면 됨

코드 예시

 

<v-data-iterator
  :items="users"
  :items-per-page="5"
  :search="search"
>
  <template #default="{ items }">
    <v-row>
      <v-col
        v-for="user in items"
        :key="user.id"
        cols="12" sm="6" md="4"
      >
        <v-card>
          <v-card-title>{{ user.name }}</v-card-title>
          <v-card-subtitle>{{ user.email }}</v-card-subtitle>
        </v-card>
      </v-col>
    </v-row>
  </template>
</v-data-iterator>

✔ 정렬, 검색, 페이지네이션이 자동으로 동작.
✔ slot을 통해 레이아웃을 자유롭게 구성 가능.
✔ 데이터가 많은 경우 v-data-iterator가 훨씬 효율적.

---

✅  v-for + list/card

Vue 기본 문법인 v-for을 활용해서 직접 반복 렌더링.

특징

• 완전 자유도 → UI/UX 원하는 대로 커스터마이징 가능
• 하지만 검색, 정렬, 페이지네이션을 직접 구현해야 함
• 작은 데이터셋이나 단순한 반복 UI에 적합

코드 예시

 

<v-row>
  <v-col
    v-for="user in users"
    :key="user.id"
    cols="12" sm="6" md="4"
  >
    <v-card>
      <v-card-title>{{ user.name }}</v-card-title>
      <v-card-subtitle>{{ user.email }}</v-card-subtitle>
    </v-card>
  </v-col>
</v-row>

✔ 간단한 경우에 적합 (예: 10개 이하 데이터).
✔ 기능 추가 시 직접 구현 필요 → 유지보수 부담.

---

✅ 실무 기준 선택 가이드

• 데이터가 많고 검색/정렬/페이지네이션이 필요한 경우 →
  👉 v-data-iterator (혹은 v-data-table)
  → 기본 기능을 빠르게 활용 가능, 유지보수 효율적
• 단순 목록, 소량 데이터, 커스터마이징 UI →
  👉 v-for
  → 불필요한 기능 없이 가볍게 구현

---

📝 핵심 요약

• v-data-iterator = 반복 UI + 내장된 검색/정렬/페이지네이션 → 실무에서 대량 데이터 관리에 유리
• v-for = 순수 반복 출력, 완전 자유도 있지만 추가 기능은 직접 구현해야 함
• 실무에서는 데이터 성격 + 유지보수 비용을 고려해 선택

 

---

 

 

🔹 v-data-iterator vs v-data-table

두 컴포넌트는 데이터 리스트를 보여준다는 점은 같지만, 목적과 제공 기능이 다릅니다.

✅ v-data-iterator

• 목적: 반복 렌더링 도우미
• UI 형태: 카드, 리스트, 그리드 등 자유롭게 구성 가능
• 내장 기능: 검색, 정렬, 페이지네이션 (기본 제공)
• 사용 예시: 유저 카드 목록, 상품 리스트, 블로그 글 등 → 레이아웃이 다양해야 할 때

 

<v-data-iterator :items="users" :items-per-page="5" :search="search">
  <template #default="{ items }">
    <v-row>
      <v-col v-for="user in items" :key="user.id" cols="12" sm="6" md="4">
        <v-card>
          <v-card-title>{{ user.name }}</v-card-title>
          <v-card-subtitle>{{ user.email }}</v-card-subtitle>
        </v-card>
      </v-col>
    </v-row>
  </template>
</v-data-iterator>

---

✅ v-data-table

• 목적: 표 형태 데이터 표시 전용
• UI 형태: 행과 열이 있는 테이블
• 내장 기능: 검색, 정렬, 필터링, 페이지네이션
• 사용 예시: 회원 관리 테이블, 로그 리스트, 매출 내역 등 → 데이터가 표 형태일 때

 

<v-data-table
  :headers="headers"
  :items="users"
  :items-per-page="5"
  class="elevation-1"
/>

---

📊 정리

• v-data-iterator → 자유로운 레이아웃, 카드/리스트에 최적화
• v-data-table → 표(table) 데이터 표현에 특화

---

🔹 2. v-data-iterator vs v-pagination

✅ v-data-iterator

• 페이지네이션을 자체적으로 지원 (:items-per-page, 내부 페이지 관리)
• 별도의 v-pagination을 쓰지 않아도 된다
• 하지만 원한다면 **슬롯 + v-pagination**을 연결해서 커스텀 가능

예:

 

<v-data-iterator
  v-model:page="page"
  :items="products"
  :items-per-page="6"
>
  <template #default="{ items }">
    <v-row>
      <v-col v-for="item in items" :key="item.id" cols="12" sm="6" md="4">
        <v-card>{{ item.name }}</v-card>
      </v-col>
    </v-row>
  </template>

  <template #footer>
    <v-pagination v-model="page" :length="10" />
  </template>
</v-data-iterator>

---

✅ v-pagination

• 독립된 페이지 이동 컴포넌트
• 직접 v-for 같은 반복문과 함께 사용해서 페이지 기능을 구현해야 함
• 단순히 page 값만 관리 → 어떤 UI든 페이지네이션을 붙일 수 있음

 

<v-row>
  <v-col
    v-for="user in pagedUsers"
    :key="user.id"
    cols="12" sm="6" md="4"
  >
    <v-card>{{ user.name }}</v-card>
  </v-col>
</v-row>

<v-pagination v-model="page" :length="totalPages" />

---

📊 정리

• v-data-iterator = 데이터 + 페이지네이션 + 정렬/검색까지 풀 패키지
• v-pagination = 페이지 UI만 제공, 데이터는 직접 잘라서 보여줘야 함

---

📝 핵심 요약 (실무 기준)

1. v-data-iterator vs v-data-table
   • 카드/리스트 → v-data-iterator
   • 표형 데이터 → v-data-table
2. v-data-iterator vs v-pagination
   • 빠르게 페이지네이션까지 구현 → v-data-iterator
   • 완전 커스텀 페이지 로직 필요 → v-pagination