0. 시작하기 전에
- 이전 포스팅에서 간단하게 v-for를 사용하여 반복처리를 해보았다.
- 리스트 렌더링이란, 간단하게 말해서 반복문을 사용한 배열 처리 과정을 말한다.
- 오늘은 반복문을 사용한 배열 처리 과정에 대해서 알아보자.
공식문서 바로가기
1. index
a) 예제코드
<template>
<ul>
<li
v-for="(fruit, index) in fruits"
:key="fruit">
{{ fruit }} - {{ index }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
fruits: ['Apple', 'Banana', 'Cherry']
}
}
}
</script>
<style>
li {
font-size: 50px;
}
</style>
b) 출력화면
c) 해설
- 예제코드에서 v-for 디렉티브를 사용한 곳을 살펴보자.
- 반복문을 사용하다보면 다양한 이유로 index가 필요한 경우가 있다.
- 이때 v-for 디렉티브에서 제공하는 표현식을 사용하면 인덱스를 쉽게 얻을 수 있다.
- 배열의 요소와 index를 위의 예제코드에서 처럼 괄호()를 이용하여 묶어주면 된다.
- 인덱스의 이름은 반드시 index일 필요는 없다. 필요에 따라서 자유롭게 원하는 명칭을 사용할 수 있다.
- 다만, 반드시 괄호를 사용하여 배열의 요소와 인덱스를 표현하는 변수를 묶어주어야 한다는 것이 중요하다.
2. computed를 활용한 리스트 렌더링
a) 예제코드
<template>
<ul>
<li
v-for="fruit in newFruits"
:key="fruit.id">
{{ fruit.id }} = {{ fruit.name }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
fruits: ['Apple', 'Banana', 'Cherry'],
}
},
computed: {
newFruits() {
return this.fruits.map((fruit, index) => {
return {
id: index,
name: fruit
}
})
}
}
}
</script>
<style>
li {
font-size: 50px;
}
</style>
b) 출력화면
c) 해설
- 위의 코드를 간단하게 설명하자면, computed를 이용해 배열 데이터를 후처리하는 과정이다.
- fruits 배열을 map() 메소드를 통해 id와 name이라는 key를 갖는 key : value의 객체형태로 재구성 한 것이다.
- v-for 디렉티브를 사용할 때에는 반드시 고유값을 key로 설정해야 하기 때문에 고유값인 fruit.id를 key로 설정하였다.
3. 고유한 key값을 만드는 방법 (shortid 패키지)
a) shortid 패키지 설치
b) 예제코드
<template>
<ul>
<li
v-for="fruit in newFruits"
:key="fruit.id">
{{ fruit.id }} = {{ fruit.name }}
</li>
</ul>
</template>
<script>
import shortid from 'shortid'
export default {
data() {
return {
fruits: ['Apple', 'Banana', 'Cherry'],
}
},
computed: {
newFruits() {
return this.fruits.map(fruit => ({
id: shortid.generate(), // generate() => shortid를 생성해주는 메소드
name: fruit
}))
}
}
}
</script>
<style>
li {
font-size: 50px;
}
</style>
c) 출력화면
d) 해설
- 설치한 패키지를 script 태그 내부에서 import 한다.
- computed 부분에서 index 매개변수를 지워준다.
- 매개변수가 fruit 하나이기 때문에, 괄호가 생략이 가능하다.
- id라는 key값에 generate() 메소드를 사용하여 key값을 생성해준다.
4. 객체 구조 분해
- 배열 안에 들어있는 요소가 객체의 형태라면, 이 부분을 분해할 수 있다.
- 다음 사진을 참고하자
- newFruits 라는 배열 안에는 id와 name이라는 key와 value로 구성된 객체 데이터가 들어있다.
- 이 객체 데이터를 fruit in fruits로 명시하는 것이 아니라, 위의 사진처럼 직접 key명으로 작성할 수 있다.
출력화면
5. 배열에 객체 데이터 추가하기
- 이 과정에는 반응성의 개념이 나옵니다.
- 반응성 = 데이터가 갱신되면 화면이 바뀌는 성질
a) 예제코드
<template>
<button @click="handler">
Click me!!!
</button>
<ul>
<li
v-for="{id, name} in newFruits"
:key="id">
{{ id }} = {{ name }}
</li>
</ul>
</template>
<script>
import shortid from 'shortid'
export default {
data() {
return {
fruits: ['Apple', 'Banana', 'Cherry'],
}
},
computed: {
newFruits() {
return this.fruits.map(fruit => ({
id: shortid.generate(), // generate() => shortid를 생성해주는 메소드
name: fruit
}))
}
},
methods: {
handler() {
this.fruits.push('Orange')
}
}
}
</script>
<style>
button, li {
font-size: 50px;
}
</style>
b) 출력화면
c) 해설
- handler라는 메소드는 'Orange'라는 문자열을 배열에 추가하는 기능이다.
- 이를 버튼에 연결시켜, 클릭할 때마다 'Orange'라는 요소가 배열에 추가된다.
- 당연히 각각의 'Orange' 요소는 다른 key값(= shortid)을 갖게 된다.
- 데이터가 추가되면 화면이 갱신되는 특성을 반응성이라고 하는데, 리스트 렌더링에는 반응성을 일으키는 트리거 메소드가 존재한다.
d) 변이 메소드
- 위의 사진은 리스트 렌더링에서 반응성을 일으키는 메소드다.
- 배열의 변이란, 배열의 요소를 삭제/추가/수정/정렬 등을 의미한다.
- 배열 변이의 기능을 갖는 메소드를 사용하면 반응성이라는 특성으로 화면이 갱신된다는 것을 의미한다.
e) 배열교체, 비 변이 메소드
댓글