반복문

v-for

Vue의 반복문은 익히 써온 반복문과 문법이 크게 다른점이 없다.
단지 html의 태그에 작성해서 반복문이 진행되는 것이 조금 다르다.

사용법

기본 문법

<태그 v-for="[변수 or (변수, 변수)] in literable value or number" :key="변수">{{ 변수 }}</태그> 

기본문법을 보면 알수 있듯이 javascript처럼 in 다음에 Array나 object, 또는 단순히 숫자만 반복하면 원하는 숫자를 넣으면 된다.

단순 값만 가져오기

<a v-for="value in menus" :key="value"> {{ value }} </a>

값과 인덱스 함께 가져오기

<a v-for="(value, i) in menus" :key="value"> {{ value }} </a>

여기서 :key를 왜 쓸까?

Vue는 in-place Patch 전략을 사용하여 메모리를 최적화하여 DOM을 재사용하는 방식으로 동작한다.
간단히 말하면 특정 데이터가 변화되었을때 전체 html을 전부다 새로 렌더링하지 않고 바뀐 데이터부분만 새로이 렌더링 한다는 것인데 여기서 v-for로 반복했을때 문제가 발생한다.

예를들어 li태그를 반복해보자

...
// 설명을 위한 것으로 완벽한 코드가 아닙니다.
<li v-for="i in list"> {{ i }} <input />개</li>
...
<script>
  data() {
    return {
      list: ["apple", "banana", "orange"],
    };
  },
</script>

이때 list를 shift해버리면

원하는 것은 태그 전체가 바뀌는 것을 원했지만 실제로 바뀐 것은 list의 값부분만 바뀌고 태그 자체가 바뀌진 않는다.
이러한 문제를 해결하기 위해 공식문서에서는 태그자체에 고유 key값을 추가하여 코드를 짜도록 권장한다.
즉, key를 추가함으로써 태그에 포함된 모든 내용들을 하나로 묶어서 바인딩 시킬 수 있다는 것이다.

...
// 설명을 위한 것으로 완벽한 코드가 아닙니다.
<li v-for="i in list" :key="i"> {{ i }} <input />개</li>
...
<script>
  data() {
    return {
      list: ["apple", "banana", "orange"],
    };
  },
</script>

공식문서에서는 list값의 구분을 인덱스로 한다고 해서 key값도 인덱스값을 넣으면 안된다고 한다. 시스템 상에서 해당 태그자체가 하나의 요소로 구별할 수 있도록 해야하기 때문에 특정 id값을 부여하도록 지시하고 있다.

[출처] https://www.youtube.com/watch?v=T4N9wjx7_E4&list=PLfLgtT94nNq3Br68sEe26jkOqCPK_8UQ-&index=4
[출처] https://goodteacher.tistory.com/525