Vue.js v-for 디렉티브로 동적 테이블 만들기

Vue.js의 v-for 디렉티브를 활용하여 동적 데이터를 테이블 형식으로 렌더링하는 방법.
실제 예제 코드를 통한 <tr v-for="(p, key) in 데이터셋"> 구문의 의미와 사용법을 알아보자.

Vue.js v-for 디렉티브 개요

Vue.js는 동적 데이터를 손쉽게 렌더링할 수 있는 프레임워크로, 특히 v-for 디렉티브를 사용하면 배열이나 객체의 데이터를 반복하여 DOM 요소를 생성할 수 있다.
이 기능은 데이터 기반의 UI를 구현할 때 매우 유용하며, 코드의 간결함과 유지보수성을 높여준다.

단순한 배열을 반복하여 목록을 출력할 때 다음과 같이 사용할 수 있다

<div v-for="item in items">
  {{ item }}
</div>

이 코드는 items 배열의 각 요소를 item 변수에 할당하고, 해당 값을 화면에 출력한다.

동적 테이블 생성 및 코드 분석

테이블 행 반복 처리

Vue.js를 이용해 데이터셋(데이터셋)을 기반으로 HTML 테이블의 행(<tr>)을 동적으로 생성하는 예제

<table border="1">
  <thead>
    <tr>
      <th>번호</th>
      <th>이름</th>
      <th>점수</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(p, key) in 데이터셋" :key="key">
      <td>{{ key + 1 }}</td>
      <td>{{ p.name }}</td>
      <td>{{ p.score }}</td>
    </tr>
  </tbody>
</table>

여기서 중요한 부분은 <tr v-for="(p, key) in 데이터셋">이다.

데이터셋 : Vue 인스턴스의 data 속성에 정의된 배열 또는 객체로, 데이터를 담고 있다.
p : 데이터셋의 각 요소를 가리키는 변수로, 예를 들어 한 선수의 정보(이름, 점수 등)를 포함한다.
key : 각 반복되는 요소의 인덱스나 속성 키로, Vue.js가 DOM 요소를 효율적으로 업데이트할 수 있도록 한다.

이 구문을 통해 Vue.js는 데이터셋 배열의 각 요소마다 하나의 <tr> 태그를 생성하고, 각 행 내부에서는 번호, 이름, 점수를 동적으로 바인딩할 수 있다.

실습 예제

실제 Vue 인스턴스와 함께 동작하는 예제로 데이터셋 배열에 저장된 데이터를 기반으로 테이블을 생성

<!-- HTML 부분 -->
<div id="app">
  <table border="1">
    <thead>
      <tr>
        <th>번호</th>
        <th>이름</th>
        <th>점수</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(p, key) in 데이터셋" :key="key">
        <td>{{ key + 1 }}</td>
        <td>{{ p.name }}</td>
        <td>{{ p.score }}</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- Vue 인스턴스 부분 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      데이터셋: [
        { name: 'Player 1', score: 100 },
        { name: 'Player 2', score: 95 },
        { name: 'Player 3', score: 90 }
      ]
    }
  });
</script>

이 예제에서는 Vue 인스턴스의 data에 정보가 저장되어 있고, v-for 디렉티브를 통해 각 요소마다 테이블 행을 생성하여 동적 데이터 렌더링을 수행한다.

효율적인 DOM 업데이트와 데이터 바인딩

Vue.js는 v-for와 함께 :key 속성을 사용하여 각 DOM 요소를 고유하게 식별한다. 이를 통해 데이터가 변경되었을 때, Vue는 최소한의 업데이트만 수행하여 성능을 최적화할 수 있다.

또한, v-for는 배열뿐 아니라 객체의 속성도 반복할 수 있어, 다양한 형태의 데이터를 효과적으로 처리할 수 있다.

핵심 포인트 및 활용 전략

Vue.js의 v-for 디렉티브는 동적 데이터 기반 UI 구현에서 중요한 역할을 한다. 이 기능을 사용하면 배열이나 객체의 데이터 구조를 그대로 HTML 요소에 매핑할 수 있어, 코드의 간결성과 유지보수성을 높일 수 있다.

핵심 포인트

데이터 배열이나 객체의 각 요소마다 DOM 요소를 자동으로 생성할 수 있다.
반복문 내에서 각 요소에 접근하여 원하는 데이터를 바인딩할 수 있다.
:key 속성을 활용하여 DOM 요소의 재사용 및 업데이트 효율을 극대화할 수 있다.

이러한 장점 덕분에, Vue.js를 활용한 동적 웹 애플리케이션 개발에서 v-for는 반드시 익혀야 할 중요한 기능 중 하나다.

저작자표시 비영리 변경금지

지식의창고

Vue.js v-for 디렉티브로 동적 테이블 만들기