[Vue3] 반복문 v-for

HTML을 짜다 보면 비슷한 <div> 같은 요소들이 수백 번 등장할 때가 있죠.

이럴 때 v-for을 사용하면 복붙 없이 간편하게 반복되는 HTML 요소를 생성할 수 있습니다.

리액트나 Vue를 쓰는 큰 장점 중 하나입니다.

---

1️⃣ 상단 메뉴 만들기

기존 HTML & CSS

<!-- HTML -->
<div class="menu">
  <a>Home</a>
  <a>Products</a>
  <a>About</a>
</div>

/* CSS (vue 파일 내 <style> 태그 안에 작성) */
.menu {
  background: darkslateblue;
  padding: 15px;
  border-radius: 5px;
}
.menu a {
  color: white;
  padding: 10px;
}

---

2️⃣ v-for를 이용한 HTML 반복문

반복되는 HTML 부분을 간단하게 작성할 수 있습니다.

2-1. 숫자로 반복하기

예제: <a> 태그를 3번 반복하여 생성

아래와 같이 별도의 데이터 없이 숫자를 직접 반복할 수 있습니다.

<template>
  <div class="menu">
    <a v-for="작명 in 3" :key="작명">Home</a>
  </div>
</template>

<script setup>
  // 별도의 스크립트가 필요하지 않습니다.
</script>

<style>
.menu {
  background: darkslateblue;
  padding: 15px;
  border-radius: 5px;
}
.menu a {
  color: white;
  padding: 10px;
}
</style>

• v-for="작명 in 3": 숫자 3만큼 반복
• :key="작명": 각 요소를 고유하게 식별하기 위한 키

---

2-2. 배열 데이터를 이용한 반복문

반복시킬 요소들을 배열로 만들어 놓고, 해당 데이터를 기반으로 HTML을 생성할 수 있습니다.

예제: 메뉴 배열을 이용해서 반복 생성하기

<template>
  <div class="menu">
    <a v-for="작명 in 메뉴들" :key="작명">{{ 작명 }}</a>
  </div>
</template>

<script setup>
const 메뉴들 = ['Home', 'Shop', 'About'];
</script>

<style>
.menu {
  background: darkslateblue;
  padding: 15px;
  border-radius: 5px;
}
.menu a {
  color: white;
  padding: 10px;
}
</style>

• v-for="작명 in 메뉴들": 메뉴들 배열의 각 항목을 순회하며 반복
• {{ 작명 }}: 각 반복 시 해당 배열의 값(Home, Shop, About)이 출력됨

---

2-3. 배열 데이터에서 인덱스 사용하기

v-for 안에서 변수 2개를 사용해, 첫 번째 변수는 배열의 값, 두 번째 변수는 인덱스를 받아올 수 있습니다.

예제:

<template>
  <div class="menu">
    <a v-for="(작명, i) in 메뉴들" :key="i">{{ 작명 }}</a>
  </div>
</template>

<script setup>
const 메뉴들 = ['Home', 'Shop', 'About'];
</script>

<style>
.menu {
  background: darkslateblue;
  padding: 15px;
  border-radius: 5px;
}
.menu a {
  color: white;
  padding: 10px;
}
</style>

• (작명, i):
  • 작명은 배열의 각 값
  • i는 0부터 시작하는 인덱스
• :key="i": 인덱스를 이용해 각 요소를 구분(보통 고유한 값이 있다면 그걸 사용하는 것이 좋습니다)

---

📌 정리

• v-for: HTML 요소를 반복 생성할 때 사용
  • 숫자 반복: v-for="변수 in 숫자"
  • 배열 반복: v-for="변수 in 배열명" → 데이터바인딩 가능
  • 배열과 인덱스 반복: v-for="(변수, 인덱스) in 배열명"
• :key 속성: 반복 요소마다 고유하게 식별하기 위해 항상 추가해주어야 합니다.