[Vuetify3] VMenu / VList

1️⃣ 기본 개념

VMenu	클릭/호버 시 팝업 메뉴를 띄움	버튼/아이콘 등 트리거와 함께 사용, context 메뉴, 드롭다운 메뉴
VList	항목을 나열하는 UI	페이지, 카드, 사이드바, 모달 등 항상 보이는 리스트용

---

2️⃣ 핵심 차이

보임 여부	트리거 클릭/호버 시 나타남	항상 보임
트리거 필요	예: 버튼, 아이콘 등	불필요
컨텐츠	내부에 VList 등 다른 컴포넌트 포함 가능	단순 항목 나열
실무 용도	드롭다운 메뉴, 컨텍스트 메뉴, 옵션 선택	사이드바 메뉴, 게시판 리스트, 카드 반복 리스트
반응형/레이아웃	트리거 기준으로 팝업 위치 결정	VRow/VCol 등으로 레이아웃 가능

---

3️⃣ 실무 예시

3-1. VMenu (드롭다운 메뉴)

 

<v-menu offset-y>
  <template #activator="{ props }">
    <v-btn v-bind="props">메뉴 열기</v-btn>
  </template>

  <v-list>
    <v-list-item @click="action1">
      <v-list-item-title>Option 1</v-list-item-title>
    </v-list-item>
    <v-list-item @click="action2">
      <v-list-item-title>Option 2</v-list-item-title>
    </v-list-item>
  </v-list>
</v-menu>

• 버튼 클릭 시만 나타나는 팝업 메뉴
• 내부에 VList를 넣어 항목 구성 가능

3-2. VList (사이드바 / 게시판)

 

<v-list>
  <v-list-item v-for="item in items" :key="item.id">
    <v-list-item-title>{{ item.title }}</v-list-item-title>
  </v-list-item>
</v-list>

• 항상 보이는 리스트
• 반복 데이터 표시, 클릭/액션 버튼 포함 가능

---

4️⃣ 실무 핵심 포인트

1. VMenu
   • 클릭/호버 기반 팝업
   • 내부에 VList 포함 가능
   • 드롭다운 메뉴, context menu, 옵션 선택용
2. VList
   • 페이지나 카드, 모달 등에서 항목 나열
   • 반복 데이터, 아이콘, 버튼, 상태 표시 등 포함 가능
   • 항상 화면에 존재
3. 정리
   • 보임 방식: VMenu = 필요 시 나타남 / VList = 항상 보임
   • 용도: VMenu = 옵션 선택 → 액션 / VList = 데이터 나열 → 정보 제공