Vue 3 v-for 반복문 완벽 이해하기

Vue 3을 사용하면 HTML 코드도 프로그래밍처럼 다룰 수 있습니다. 특히 v-for 디렉티브를 활용하면 반복적인 요소를 효율적으로 생성할 수 있죠. 이번 글에서는 v-for를 활용하여 코드의 중복을 줄이고, 가독성을 높이는 방법을 자세히 알아보겠습니다.

1. JavaScript 배열(Array) 기본 개념

Vue에서 v-for를 활용하려면 먼저 JavaScript의 배열(Array)을 이해해야 합니다.

1.1 배열이란?

배열은 여러 개의 데이터를 한 곳에 저장할 수 있는 자료형입니다. 예를 들어, 여러 개의 메뉴 항목을 저장하고 싶다면 아래처럼 배열을 만들 수 있습니다.

js복사편집

let menus = ["홈", "상품", "문의하기"];

이제 이 배열에 저장된 특정 항목을 가져오려면 인덱스를 사용하면 됩니다.

js복사편집

console.log(menus[0]); // 출력: "홈"
console.log(menus[1]); // 출력: "상품"
console.log(menus[2]); // 출력: "문의하기"

JavaScript에서는 배열의 인덱스가 0부터 시작한다는 점을 기억하세요!

2. Vue의 데이터 바인딩과 배열 활용

Vue에서는 데이터 바인딩을 이용해 배열을 화면에 표시할 수 있습니다.

html복사편집

<div id="app">
  <p>{{ menus }}</p>
</div>

<script>
  const app = Vue.createApp({
    data() {
      return {
        menus: ["홈", "상품", "문의하기"]
      };
    }
  });
  app.mount("#app");
</script>

위 코드를 실행하면, menus 배열의 전체 내용이 그대로 화면에 출력됩니다. 하지만 이렇게 하면 배열이 [ '홈', '상품', '문의하기' ] 형태로 나타나기 때문에 원하는 대로 표시하기 어렵습니다. 이를 해결하기 위해 v-for를 사용합니다.

3. v-for 반복문을 활용한 HTML 요소 생성

HTML에서 여러 개의 <a> 태그를 반복적으로 생성해야 할 때 v-for를 활용하면 코드가 훨씬 깔끔해집니다.

3.1 기존 방식: 반복되는 코드

html복사편집

<a href="#">홈</a>
<a href="#">상품</a>
<a href="#">문의하기</a>

위와 같이 같은 형식의 <a> 태그를 여러 번 작성해야 한다면 비효율적이겠죠?

3.2 v-for 적용하기

이제 v-for를 사용해 반복되는 태그를 효율적으로 생성해 보겠습니다.

html복사편집

<div id="app">
  <nav>
    <a v-for="menu in menus" :key="menu">{{ menu }}</a>
  </nav>
</div>

<script>
  const app = Vue.createApp({
    data() {
      return {
        menus: ["홈", "상품", "문의하기"]
      };
    }
  });
  app.mount("#app");
</script>

3.3 코드 설명

v-for="menu in menus": menus 배열의 각 항목을 menu 변수에 할당하고 <a> 태그를 반복 생성합니다.
:key="menu": Vue에서 반복문을 사용할 때는 고유한 key 값을 지정해야 성능 최적화가 이루어집니다. 여기서는 메뉴 이름 자체를 key로 사용했습니다.
결과적으로, <a> 태그가 배열의 항목 개수만큼 자동 생성됩니다.

4. v-for와 인덱스 값 활용하기

Vue의 v-for는 단순히 데이터를 반복 출력하는 것뿐만 아니라, 현재 반복문의 순서를 알 수 있는 인덱스(index) 값도 제공합니다.

html복사편집

<ul>
  <li v-for="(menu, index) in menus" :key="index">
    {{ index + 1 }}. {{ menu }}
  </li>
</ul>

코드 설명

v-for="(menu, index) in menus"
- menu는 배열의 각 항목을 의미합니다.
- index는 0부터 시작하는 반복 횟수를 나타냅니다.
{{ index + 1 }}: 사람이 이해하기 쉽게 1부터 번호를 매기도록 index + 1을 사용했습니다.

출력 결과

markdown복사편집

1. 홈
2. 상품
3. 문의하기

5. v-for를 활용한 동적 리스트 생성

만약 상품 목록을 동적으로 표시해야 한다면 어떻게 할까요?

html복사편집

<div id="app">
  <ul>
    <li v-for="(product, index) in products" :key="index">
      {{ index + 1 }}. {{ product.name }} - {{ product.price }}원
    </li>
  </ul>
</div>

<script>
  const app = Vue.createApp({
    data() {
      return {
        products: [
          { name: "노트북", price: 1500000 },
          { name: "스마트폰", price: 900000 },
          { name: "태블릿", price: 700000 }
        ]
      };
    }
  });
  app.mount("#app");
</script>

출력 결과

markdown복사편집

1. 노트북 - 1500000원
2. 스마트폰 - 900000원
3. 태블릿 - 700000원

6. v-for를 활용한 UI 최적화 팁

6.1 v-if와 함께 사용하지 않기

v-for와 v-if를 함께 사용하면 예상치 못한 오류가 발생할 수 있습니다. 대신 computed 속성을 활용하세요.

6.2 v-for를 효율적으로 활용하려면?

고유한 key 값을 반드시 설정하세요.
데이터가 많을 경우, 가상 스크롤링(Virtual Scrolling) 기법을 고려하세요.

마무리하며

Vue의 v-for를 활용하면 HTML 요소를 효율적으로 반복 생성할 수 있습니다. 특히 배열과 함께 사용하면 데이터 구조를 유지하면서도 코드의 가독성과 유지보수성을 높일 수 있습니다.

💡 여러분은 Vue의 v-for를 어떤 프로젝트에서 활용하고 계신가요? 댓글로 경험을 공유해주세요!