[Vuetify3] 데이터 표시 / 리스트

1️⃣ 개요

• 역할: 사용자에게 구조화된 데이터를 시각적으로 표시
• 특징:
  • 반복 데이터 표시 → v-for + 컴포넌트
  • 테이블 정렬/검색/페이지네이션 지원
  • 카드, 리스트 등 다양한 시각적 패턴 가능

---

2️⃣ 주요 컴포넌트

컴포넌트역할실무 활용 포인트

VDataTable	정렬, 필터, 페이징 가능한 테이블	관리자 페이지, 데이터 리스트, 액션 버튼 slot 활용
VSimpleTable	단순 테이블	소규모 데이터, 커스텀 slot 가능
VList / VListItem	리스트 항목	클릭/액션 포함 반복 리스트, 사용자/알림 목록 등
VListItemTitle / VListItemSubtitle / VListItemContent	리스트 아이템 구조	제목/부제목/내용 구분
VChip	상태/태그 표시	리스트 항목 상태, 카테고리 표시
VAvatar	이미지/아이콘 표시	프로필, 썸네일, 사용자 이미지
VImg	이미지 표시	카드/리스트 썸네일, 배너 이미지

---

3️⃣ 실무 패턴

3-1. 데이터 테이블 (VDataTable)

<v-data-table
  :headers="headers"
  :items="items"
  item-key="id"
  class="elevation-1"
  :search="search"
>
  <template v-slot:item.actions="{ item }">
    <v-btn icon @click="edit(item)"><v-icon>mdi-pencil</v-icon></v-btn>
    <v-btn icon @click="deleteItem(item)"><v-icon>mdi-delete</v-icon></v-btn>
  </template>
</v-data-table>

• 정렬, 검색, 슬롯 기반 버튼/아이콘 액션 지원
• 실무: 관리자 페이지, 리스트 관리, 반응형 컬럼 숨기기

3-2. 단순 리스트 (VList)

 

<v-list>
  <v-list-item v-for="user in users" :key="user.id">
    <v-list-item-avatar><v-avatar :src="user.avatar"/></v-list-item-avatar>
    <v-list-item-content>
      <v-list-item-title>{{ user.name }}</v-list-item-title>
      <v-list-item-subtitle>{{ user.email }}</v-list-item-subtitle>
    </v-list-item-content>
    <v-list-item-action>
      <v-btn icon @click="message(user)"><v-icon>mdi-email</v-icon></v-btn>
    </v-list-item-action>
  </v-list-item>
</v-list>

• 반복 데이터 + 카드/액션 버튼 조합
• 실무: 채팅/사용자 리스트, 알림 리스트

3-3. 카드 반복 (VCard + VRow/VCol)

 

<v-row>
  <v-col v-for="item in items" :key="item.id" cols="12" md="6" lg="4">
    <v-card>
      <v-img :src="item.image" height="200px"/>
      <v-card-title>{{ item.title }}</v-card-title>
      <v-card-text>{{ item.description }}</v-card-text>
    </v-card>
  </v-col>
</v-row>

• 그리드형 카드 리스트 패턴
• 실무: 상품, 게시물, 포트폴리오, 갤러리

---

4️⃣ 실무 핵심 포인트

1. 반복 데이터 표시: v-for + VCard / VListItem
2. 테이블: VDataTable → 검색, 정렬, 페이지네이션 필수
3. 리스트/카드: VList / VCard + slot으로 액션/버튼/아이콘 구성
4. 상태 표시: VChip, VAvatar → 사용자/상태/카테고리 시각화
5. 반응형: VRow/VCol + breakpoint 조합, 모바일 1열, 데스크탑 N열

---

5️⃣ 핵심 요약 (체크리스트)

• 테이블: VDataTable, VSimpleTable
• 리스트: VList, VListItem, VListItemTitle/Subtitle/Content
• 카드 반복: VCard + VRow/VCol
• 상태/시각화: VChip, VAvatar, VImg
• 실무 적용 패턴:
  1. 반복 데이터 → 리스트/카드
  2. 테이블 → 검색/정렬/페이지네이션
  3. 카드 → 그리드형 UI, 반응형 고려

VListItemTitle	리스트 아이템의 주 제목	VListItem 내부
VListItemSubtitle	리스트 아이템의 부제목 / 설명	VListItem 내부
VListItemContent	제목 + 부제목을 감싸는 컨테이너	VListItem 내부