7. 리스트 렌더링(v-for, v-if)

리스트 렌더링

v-for

---

v-for 디렉티브를 사용해 배열기반 리스트 렌더링
item in items 형태로 특별한 문법이 필요험(items은 원본 데이터 배열, item은 반복되는 배열의 값) / in 대신 of 사용 가능

기본 사용방법

//HTML
<ul id="example-1">
    <li v-for="item in items">
        {{ item.message }}
    </li>
</ul>

//JavaScript
var example1 = new Vue({
    el: "#example-1",
    data: {
        items: [
            { message: "Foo" },
            { message: "Bar" }
        ]
    }
})

위의 코드는 렌더링 되어 아래와 같은 결과가 나온다

• Foo
• Bar

v-for 블록 안에는 부모 범위 속성에 대한 모든 권한이 있고 현재 항목의 인덱스에 대한 두 번째 전달인자 옵션을 제공

//HTML
<ul id="example-2">
    <li v-for="(item, index) in items">
        {{ parentMessage }} - {{ index }} - {{ item.message }}
    </li>
</ul>

//JavaScript
var example2 = new Vue({
    el: "#example-2",
    data: {
        parentMessage: "Parent",
        items: [
            { message: "Foo" },
            { message: "Bar" }
        ]
    }
})

결과는 아래와 같다
- Parent - 0 - Foo
- Parent - 1 - Bar

v-for 템플릿

템플릿 v-if와 마찬가지로, 태그를 사용해 여러 엘리먼트의 블럭을 렌더링 할 수 있음

<ul>
    <template v-for="item in items">
        <li>{{ item.msg }}</li>
        <li class="divivder"></li>
    </template>
</ul>

v-for과 객체

v-for을 사용하여 객체의 속성을 반복할 수도 있음

//HTML
<ul id="repeat-object" class="demo">
     <li v-for="value in object">
         {{ value }}
    </li>
</ul>

//JavaScript
new Vue({
    el: "#repeat-object",
    data: {
        object: {
            firstName: "John",
            lastName: "Doe",
            age: 30
        }
    }
})

결과
- John
- Doe
- 30

Range v-for

v-for은 정수를 사용할 수 있음. 이 경우 템플릿을 여러번 반복 함

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

결과
1 2 3 4 5 6 7 8 9 10

컴포넌트와 v-for

나중에 다시 작성 예정

v-for와 v-if

v-for와 v-if가 같은 노드에 존재하면 v-for이 우선 순위를 가짐.
둘을 같이 쓰는건 아래 코드와 같이 일부 항목만 렌더링 할때 유용함

<li v-for="todo in todos" v-if="!todo.isComplete">
    {{ todo }}
</li>

위의 경우는 완료되지 않은 todo가 렌더링 된다

엘리먼트를 전부 렌더링 하고, 조건문으로 보여지고 싶은 부분만 추리고 싶으면
v-if를 래퍼 엘리먼트로 옮기면 된다

<ul v-if="shouldRenderTodos">
    <li v-for="todo in todos">
        {{ todo }}
    </li>
</ul>

key

---

v-for에서 렌더링된 엘리먼트 목록을 갱신할 때 “in-place patch” 전략 사용
데이터 항목의 순서가 변경된 경우 항목의 순서와 일치하도록 DOM요소를 이동하는 대신 Vue는 각 요소를 적절한 위치에 패치하고 해당 인덱스에서 렌더링할 내용을 반영하는지 확인함

이때 재정렬 할 수 있도록 각 항목에 고유속성 key를 제공해야 함

<div v-for="item in items" :key="item.id">
    <!-- content -->
</div>

v-for에는 항상 key를 추가하는 것이 좋음
예외 : 반복되는 DOM 내용이 단순하지 않거나, 의도적인 성능 향상을 위해 기본 동작에 의존하는 경우 => 그냥 복잡하게 반복문을 썼을때를 제외하고는 key를 쓰라는 것.

배열 변경 감지

---

변이 메소드

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()
  ps. 루비랑 똑같다

배열 대체

• filter()
• concat()
• slice()
  위 세가지 메소드를 사용하면 항상 새 배열을 반환
  이때 Vue는 기존 DOM을 버리고 새로 렌더링을 하는것이 아니라
  겹치는 객체가 포함된 다른 배열로 대체해 효율적임

주의

JavaScript의 제한으로 Vue는 2가지 경우를 감지할 수 없음
1. 인덱스로 배열에 있는 항목을 직접 설정하는 경우 vm.items[indexOfItem] = newValue
=> Vue.set(example1.items, indexOfItem, newValue) 사용
2. 배열의 길이를 수정하는 경우 vm.items.length = newLength
=> splice 사용