[Vue3] 리스트 렌더링 (v-for)

• v-for 디렉티브를 통해 배열을 리스트로 렌더링

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.message }}
    </li>
  </ul>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      items: [
        { id: 1, message: 'Foo' },
        { id: 2, message: 'Bar' },
      ]
    }
  }
}
</script>

• v-for 범위 내 모든 속성 접근 가능
• 현재 아이템의 index를 제공

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

<script>
export default {
  name: 'App',
  data () {
    return {
      items: [{ message: 'Foo' }, { message: 'Bar' }]
    }
  }
}
</script>

• v-for의 아이템을 분해 할당해 사용할 수 있다.

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

<script>
export default {
  name: 'App',
  data () {
    return {
      items: [{ message: 'Foo' }, { message: 'Bar' }]
    }
  }
}
</script>

• in 대신 of를 사용하여 자바스크립트 반복문 문법처럼 사용할 수 있다.

<div v-for="item of items"></div>

---

1. 객체에 v-for 사용

• (value, key, index)
  • value: 객체의 value값 (e.g. '와스레나이', '다나카')
  • key: 객체의 key값 (e.g. 'title', 'singer')
  • index: obj의 순서값을 index로 제공

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

<script>
export default {
  name: 'App',
  data () {
    return {
      obj: {
        title: '와스레나이',
        singer: '다나카'
      }
    }
  }
}
</script>

---

2. 숫자 범위에 v-for 사용

• 1부터 n까지 템플릿을 여러번 반복

<span v-for="n in 10">{{ n }}</span>

---

3. v-if와 v-for 함께 사용하지 않기 !

• v-if가 v-for보다 우선순위가 높기 때문에 v-if 조건문에서 v-for 변수에 접근할 수 없다.

<template>
  <ul>
    <li :key="todo.name" v-for="todo in todos" v-if="!todo.isComplete">
      {{ todo.name }}
    </li>
  </ul>
</template>


<script>
export default {
  name: 'App',
  data () {
    const todos = [
      {
        name: '문동은',
        isComplete: true
      },
      {
        name: '박연진',
        isComplete: false
      },
    ]
    return { todos }
  }
}
</script>

• todo 속성이 인스턴스에 정의되어 있지 않아 에러 발생
  

• 아래 코드와 같이 v-for를 옮겨 해결하면 된다.

<template>
  <ul>
    <li v-for="todo in todos" :key="todo.index">
      <span v-if="!todo.isComplete">
        {{ todo.name }}
      </span>
    </li>
  </ul>
</template>



<script>
export default {
  name: 'App',
  data () {
    const todos = [
      {
        name: '문동은',
        isComplete: true
      },
      {
        name: '박연진',
        isComplete: false
      },
    ]
    return { todos }
  }
}
</script>

---

4. key를 통한 상태 유지

• Vue가 각 노드의 ID를 추적하고 기존 엘리먼트를 재사용/재정렬할 수 있도록 힌트를 제공하려면 각 항목의 고유한 key 속성을 제공해야 한다.
• Vue는 리스트 아이템의 순서가 변경된 경우, 아이템의 순서와 일치하도록 DOM 엘리먼트를 이동하는 대신 변경이 필요한 index의 엘리먼트들을 제자리에서 패치해 아이템을 렌더링하도록 한다.
• key에는 문자열, 숫자, 심볼 형식의 값만 바인딩해야 한다.

---

5. 컴포넌트에 v-for 사용하기

• MyComponent라는 컴포넌트에 범위만큼 props로 데이터를 전달할 수 있다.

<MyComponent v-for="item in items" :key="item.id" />

• v-for="(item, index) in items" 를 통해 item이 전달될 것 같지만 그렇지 않다.
• item이 자동으로 전달되지 않은 이유
  • v-for를 사용해야만 컴포넌트 사용이 가능하도록 하는 의존관계를 만들지 않기 위해서다.

<MyComponent
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
/>