[Vue.js] v-if와 v-for 함께 사용하기

<template>
  <div>
    <!-- 첫 번째 예제: v-if와 v-for를 함께 사용한 경우 -->
    <div v-for="item in items" v-if="item.show">
      {{ item.name }}
    </div>

    <!-- 두 번째 예제: v-if와 v-for를 따로 사용한 경우 -->
    <div v-for="item in filteredItems" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '사과', show: true },
        { id: 2, name: '바나나', show: false },
        { id: 3, name: '오렌지', show: true }
      ]
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.show);
    }
  }
};
</script>

<style scoped>
/* 컴포넌트에만 적용될 스타일을 작성할 수 있습니다. */
</style>

Vue에서 v-if와 v-for를 함께 사용하는 것은 권장되지 않습니다. 이는 코드를 이해하기 어렵게 만들고 성능에 영향을 줄 수 있습니다. 그러나 때로는 두 디렉티브를 함께 사용해야 할 때도 있습니다. 이를 더 잘 이해하기 위해 두 가지 방법을 비교해보겠습니다.

첫 번째 예제에서는 v-if와 v-for를 함께 사용한 경우를 보여줍니다. 이 경우 v-if가 먼저 평가되므로 items 배열의 각 요소에 대해 조건을 검사합니다. 따라서 item.show가 true인 경우에만 해당 요소가 렌더링됩니다.

두 번째 예제에서는 v-if와 v-for를 따로 사용한 경우를 보여줍니다. 여기서는 items 배열을 필터링하여 필터링된 배열을 v-for로 순회합니다. 이렇게 하면 v-for는 조건부 렌더링보다 먼저 실행되므로 불필요한 요소를 렌더링하지 않습니다.

따라서 가능하면 v-if와 v-for를 따로 사용하여 코드를 더 명확하고 성능을 향상시키는 것이 좋습니다.