v-for 해부: 리스트 렌더링

핵심 개념

v-for는 배열이나 객체를 순회하며 반복 렌더링합니다. :key로 고유 식별자를 제공해야 합니다. v-for를 지우며 리스트가 어떻게 사라지는지 확인하십시오.

코드 분석

VUE📋 코드 (19줄)



const{createApp,ref}=Vue;
createApp({
  setup(){
    const units=ref([{id:1,model:'T-800',threat:8},{id:2,model:'T-1000',threat:10},{id:3,model:'T-X',threat:9}]);
    const add=()=>units.value.push({id:Date.now(),model:'T-'+Math.floor(Math.random()*900+100),threat:Math.floor(Math.random()*10)+1});
    const remove=(id)=>units.value=units.value.filter(u=>u.id!==id);
    return{units,add,remove};
  },
  template:`<div>
    <div v-for='u in units' :key='u.id' style='display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;padding:6px;background:#111;font-size:11px;'>
      <span style='color:#f59e0b'>{{u.model}}</span>
      <span style='color:#888'>위협:{{u.threat}}</span>
      <button @click='remove(u.id)' style='background:#10b981;color:#080808;border:none;padding:2px 8px;cursor:pointer;font-size:10px'>✕</button>
    </div>
    <button @click='add' style='background:#333;color:#888;border:none;padding:6px 12px;cursor:pointer;font-family:monospace;font-size:10px;margin-top:4px'>ADD UNIT</button>
  </div>`
}).mount('#vfor-out');

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 Vue 3 'v-for' 코드에서
반응성 시스템 관련 버그와 watch 누수를
찾아서 수정해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'v-for'를 활용한 실전 Vue 컴포넌트를
Composition API + script setup 문법으로 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 Vue 'v-for' 사용 패턴 전체를 분석하고
번들 크기·렌더링 성능·반응성 효율을
종합 점검해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

Vue 3 'v-for'가 React의 대응 기능 대비
어떤 장단점이 있는지 솔직하게 평가하고
실무 선택 기준을 알려줘.

⭐ 이것만 기억하세요

v-for 해부: 리스트 렌더링은 이 3가지만 확실히 잡으세요

1.v-for에 :key를 빠뜨리면 Vue가 항목 순서를 추적하지 못해서 삭제·재정렬 시 엉뚱한 요소가 업데이트됩니다

2.v-for='(item, index) in list' :key='item.id'로 배열을 순회하며, key는 고유 식별자여야 합니다

3.다음 챕터에서 반응형 데이터를 기반으로 파생 값을 자동 계산하는 computed를 배웁니다

💬 이 챕터 질문 보기

VUE · CH.10 — 질문하거나 답변을 확인하세요

→

진행도 10 / 34

← 커리큘럼으로 ← 목록으로 (Vue 3)