v-for 디렉티브
v-for는 Vue.js에서 리스트나 배열, 객체를 반복 렌더링할 때 사용하는 디렉티브입니다. 이를 통해 배열이나 객체의 각 항목을 DOM 요소로 반복적으로 생성할 수 있습니다. v-for는 매우 강력한 도구로, 복잡한 리스트나 동적인 데이터 렌더링에 유용합니다.
주요 특징:
- 배열, 객체 반복 렌더링:
v-for는 배열, 객체의 요소를 반복하여 렌더링합니다. - 반드시
key속성 필요: Vue는 효율적인 DOM 업데이트를 위해 각 반복 항목에key속성을 요구합니다.key는 각 항목을 고유하게 식별하는 데 사용됩니다. - 인덱스 및 값 참조 가능: 배열을 순회할 때는 인덱스를, 객체를 순회할 때는 키와 값을 참조할 수 있습니다.
사용 예시:
1. 배열의 반복 렌더링:
배열 데이터를 반복하여 HTML 요소를 렌더링할 수 있습니다.
<ul>
<li v-for="(item, index) in items" :key="index">
{{ index }}: {{ item }}
</li>
</ul>
위 코드에서 items는 배열이며, 각 item과 해당 index가 반복적으로 <li> 요소에 렌더링됩니다. :key="index"는 Vue가 각 항목을 고유하게 식별할 수 있게 해줍니다.
2. 객체의 반복 렌더링:
객체의 키와 값을 반복하여 렌더링할 수 있습니다.
<ul>
<li v-for="(value, key) in object" :key="key">
{{ key }}: {{ value }}
</li>
</ul>
이 예제에서 object는 객체이며, 객체의 key와 value를 반복하여 각 항목을 렌더링합니다.
3. 중첩 반복:
v-for는 중첩하여 사용 가능하며, 다차원 배열이나 객체에서 중첩된 반복을 처리할 수 있습니다.
<ul>
<li v-for="(category, index) in categories" :key="index">
{{ category.name }}
<ul>
<li v-for="(item, idx) in category.items" :key="idx">
{{ item }}
</li>
</ul>
</li>
</ul>
위 코드에서 categories는 객체의 배열이며, 각 카테고리 안에 포함된 items를 중첩 반복하여 렌더링합니다.
key 속성의 중요성:
v-for에서 항목에 고유한key값을 지정하는 것이 매우 중요합니다.key는 Vue가 DOM에서 항목을 추적하고, 항목이 추가되거나 제거될 때 효율적으로 업데이트할 수 있도록 도와줍니다.key값이 없거나 적절하지 않으면 Vue는 항목을 효율적으로 업데이트하지 못해 성능 저하 또는 예기치 않은 동작을 초래할 수 있습니다.
key 예시:
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
여기서 item.id는 각 항목의 고유한 식별자 역할을 하며, 이 값이 key 속성에 할당됩니다.
v-if와 v-for의 사용 주의사항:
v-for와v-if를 함께 사용할 때는 주의가 필요합니다.v-for가v-if보다 우선순위가 높기 때문에, 리스트 내 각 항목에서v-if가 실행됩니다. 이를 통해 전체 리스트를 대상으로 조건을 걸기보다는 각 항목마다 조건이 걸리게 됩니다.- 예시:
<li v-for="item in items" v-if="item.isActive" :key="item.id">{{ item.name }}</li>
이 코드는 items 배열에서 isActive가 true인 항목들만 렌더링합니다. 전체 리스트가 아닌 각 항목에서 v-if가 실행되므로 성능에 영향을 미칠 수 있습니다.
객체의 반복:
객체의 속성(key-value)을 반복하려면 v-for를 사용할 수 있습니다.
<ul>
<li v-for="(value, key) in myObject" :key="key">
{{ key }}: {{ value }}
</li>
</ul>
위 코드에서 myObject의 key와 value 쌍을 반복하여 각각의 속성과 값을 렌더링합니다.
인덱스 활용:
v-for는 배열을 순회할 때 해당 항목의 인덱스를 함께 제공할 수 있습니다.
<li v-for="(item, index) in items" :key="index">
{{ index }}: {{ item }}
</li>
여기서 index는 현재 항목의 인덱스 값을 나타냅니다.
요약
v-for는 리스트(배열) 또는 객체의 항목을 반복하여 렌더링하는 데 사용됩니다.- 각 항목에 고유한
key속성을 부여하여 Vue가 효율적으로 DOM 업데이트를 처리할 수 있도록 해야 합니다. - 인덱스와 값을 함께 사용할 수 있으며, 객체의 반복 렌더링도 가능합니다.
v-if와 함께 사용할 때는 성능 상의 영향을 고려하여 조심스럽게 사용해야 합니다.
