vue.js - 반복문

• vue.js에서는 반복문 제공하기 위해 v-'~'와 같은 디렉티브를 제공한다.
• 디렉티브는 DOM에 반응형 행동을 적용하기 위한 특수한 속성을 말한다.

<template>
  <div>
    <p>{{ foods[0] }}</p>
    <p>{{ foods[1] }}</p>
    <p>{{ foods[2] }}</p>
    <p v-for="(item) in foods" :key="item">{{ item }}</p>
    <p v-for="(item, index) in foods" :key="item">{{ item }} - {{ index }}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      foods: ["김밥", "순대", "만두"],
    }
  }
}
</script>

<style>
</style>

• v-for를 사용하지 않으면 foods[i]와 같이 접근해야 한다.
• v-for를 사용할 시에는 "(리스트 안의 요소를 가리키는 변수) in 리스트"와 같이 해주면 된다. 
  • 만약 인덱스에 대한 값도 받으려면 (변수, 인덱스)와 같이 설정해주면 자동으로 0값 부터 설정이 된다. 
  • 이때 주의 사항으로는 :key 속성을 꼭 선언해줘야 한다.
    • :key가 필요한 이유는 vue에서 DOM을 효율적으로 업데이트하기 위해 이전 Virtual DOM과 새 Virtual DOM을 비교해서 바뀐 부분만 실제 DOM에 반영한다.
    • 이때 v-for로 리스트를 렌더링할 경우, 각 항목을 어떻게 비교할지 판단하기 위해 고유한 식별자(key)가 필요하다
    • 따라서 배열을 만들 때 임의로 고유값을 가진 객체로 만드는 것이 좋은 선택일 수 있다.
• item과 같은 변수를 쓸 수 있는 이유는 디렉티브를 사용하면 내부적으로 JavaScript로 변환되고, 변수를 선언해주기 때문이다.
• 자바스크립트에서 선언되므로 :속성이나 {{ 데이터 }}에도 넣어줄 수 있는 것이다.

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


items.map(item => {
  return createElement('li', item); // item은 이 함수 내부에서 유효함
});