vue: 목록 렌더링 (v-for)

무한대 for구문 with chatGPT

 

Vue에서는 목록을 렌더링할 때는 v-for 디렉티브를 사용합니다. v-for는 배열 또는 객체의 데이터를 반복하여 여러 요소를 렌더링 할 때 유용합니다. 주로 <template>, <div>, <li>등의 요소에 사용됩니다.

 

기본사용법

v-for는 아이템과 인덱스를 반복하며 렌더링할 수 있습니다.

 

배열반복

배열 데이터와 각 아이템을 렌더링할 때는 다음과 같이 사용합니다.

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ index }}: {{ item }}
    </li>
  </ul>  
</template>

<script>
export default {
  data() {
    return {
      items: ["사과","바나나", "오렌지"],
    };
  },
};
</script>

★ Vue SFC Playground 코드 실행 →

여기서

• (item, index)는 각각 배열의 값과 인덱스를 나타냅니다.
• :key="index"는 각 요소에 고유 키를 할당하여  Vue가 효율적으로 DOM을 업데이트할 수 있도록 합니다.

 

객체 반복

객체의 속성을 반복할 때도 v-for를 사용할 수 있습니다. 다음과 같이 객체의 키와 값으로 요소를 렌더링할 수 있습니다.

<template>
  <ul>
    <li v-for="(value, key) in user" :key="key">
      {{ key }}: {{ value }}
    </li>
  </ul>  
</template>

<script>
export default {
  data() {
    return {
     user:{
      name:"철수",
      age: 30,
      occupation: "개발자"
     }
    };
  },
};
</script>

★ Vue SFC Playground 코드 실행 →

여기서:

• (value, key)는 각각 객체의 값과 키를 나타냅니다.
• :key="key"는 각 항목에 고유 키를 지정하여 효율적인 렌더링을 돕습니다.

 

객체의 키, 값, 인덱스 사용

객체를 반복하면서 인덱스까지 사용하고 싶다면 세 번째 매개변수로 인덱스를 추가할 수 있습니다.

<ul>
  <li v-for="(value, key, index) in user" :key="index">
    {{ index }}: {{ key }} - {{ value }}
  </li>
</ul>

 

다중 V-for 중첩

다차원 배열을 다루거나 중첩된 데이터를 반복해야 할 때는 v-for를 중첩할 수 있습니다.

<template>
  <div v-for="(row, rowIndex) in grid" :key="rowIndex">
    <span v-for="(cell, cellIndex) in row" :key="cellIndex">
      {{cell}}
    </span>
  </div>    
</template>

<script>
export default {
  data() {
    return {
      grid:[
        ["A","B","C"],
        ["D","E","F"],
        ["G","H","I"],
      ]
    };
  },
};
</script>

★ Vue SFC Playground 코드 실행 →

V-for와 v-if 함께 사용하기

v-for와 v-if를 함께 사용할 경우, 항상 v-for가 v-if보다 우선 적용 됩니다. 그러나 이런 경우에는 computed속성을 이용해 조건에 맞는 데이터만 반환하도록 하는 것이 권장됩니다.