vue.js - 리스트 렌더링
리스트 렌더링
- 비슷한 템플릿을 반복해서 나타날 때 v-for디렉티브를 사용하면 쉽게 리스트를 렌더링 할 수 있습니다.
- v-for 디렉티브의 범위를 숫자로 지정할 경우 0부터 시작하지 않고 1부터 시작합니다.
- 배열을 이용해서 표현할 경우 아래와 같은 예시로 표현할 수 있습니다.
<li id="example" v-for="item in items">
</li>
<script>
var example1 = new Vue({
el: '#example',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
</script>
- jquery와 비슷하게 두 번째 파라미터로 index를 표현할 수 있습니다.
- v-for 디렉티브 문법의 in 대신 of를 사용해서 표현할 수도 있습니다.
v-for 객체 반복
- 배열에서 key값을 추가해서 표현 할 수 있습니다.
- v-for=”item in objects”
- v-for=”(item,key) in objects”
- v-for=”(item,key,index) in objects”
- 객체를 반복할 때에는 key의 나열 순서에 따라 결정됩니다. 때문에 이 순서는 javascript 엔진 구현에 따라 일관적이지 않습니다. 그래서 배열 사용을 권장합니다.
v-for 디렉티브 변경 감지
- v-for디렉티브는 배열의 변경 메소드가 호출되면 다시 렌더링합니다.
- 래핑된 메소드는 push, pop, shift, unshift, splice, sort, reverse가 있습니다.
- 위 메소드는 원본 배열을 변형시키는데, filter, concat, slice 메소드를 사용하면 원본을 변형시키지 않고 작업할 수 있습니다.
Vue가 배열에 대해 변경사항을 감지할 수 없는 경우
- 인덱스로 배열에 있는 값을 직접 변경하는 경우
- arr.items[index] = newValue;
- Vue.set(arr.items, index, newValue)과 같이 사용해야 다시 렌더링합니다.
- arr.items.splice(indexOfItem, 1, newValue)의 방법도 있습니다.
- 배열 길이를 수정하는 경우
- arr.items.length = newLength;
- arr.items.splice(newLength)과 같이 사용해야 다시 렌더링합니다.
v-for와 v-if
- 두 디렉티브가 동일한 노드에 있으면 v-for가 더 높은 우선순위를 가집니다.
- 그래서 v-if는 매 반복마다 수행됩니다.
- 만약 반복을 조건부로 지정하고 싶다면, < template > 을 이용해서 작성해야합니다.
v-for 디렉티브의 key속성
- v-for디렉티브는 화면을 렌더링할 때 효율을 위해 비슷한 템플릿은 자동을 분석해 재활용합니다.
- 때문에 같은 화면을 렌더링하면 예상치 못한 결과가 나올 수 있는데 이때, key속성을 이용해 방지할 수 있습니다.
- key속성에는 각 데이터의 고유한 값을 사용해야합니다.
- key속성은 컴포넌트를 사용할 때에는 필수로 사용해야합니다.
ps. 찾아보고 공부하면서 정리하는 내용이라 틀릴 수 있음을 알려드립니다.
참고