[Vue] 리스트 렌더링 (v-for)

⚠️ 이 포스팅은 Vue3(한국어): 리스트 렌더링을 공부하고 정리한 블로그 포스팅입니다. ⚠️

 

---

 

기본 배열 데이터로 리스트 만들어주기

기본 구조

배열에 있는 데이터를 하나씩 꺼내올때 v-for 디렉티브를 사용한다. items가 배열이라면 item in items 구조로 items에 있는 데이터에 하나씩 접근한다. 이때 상태유지를 위해 key값을 함께 제공해주어야한다. key값을 부여하면 상태를 유지시켜 준다. key는 고유한 값으로 Vue가 각각의 리스트를 분별할때 사용한다. 예를 들어, key값을 가지고 있는 v-for로 만든 어떤 리스트에 변화가 생겼을때 Vue는 이 리스트를 처음부터 다시 렌더링하지 않고 key로 각각의 요소를 구별해서 바뀐 부분만 업데이트해 준다. 한마디로 v-for와 key 속성은 항상 같이 사용해주어야하는 세트다.

 

아래의 예제에서 items가 배열이라면 items 안에 있는 데이터에 접근하기 위해 내가 만들어준 item이라는 변수로 각각의 데이터에 접근해 사용해준다. v-for 디렉티브로 리스트를 만들었기 때문에 key 속성을 부여해주어야 하는데 여기서 key값으로 각각의 데이터 item을 부여해주었다. 아래의 예제에서는 v-bind를 붙여주었지만 생략할 수 있다.

items = ['a', 'b', 'c']
<li v-for="item in items" v-bind:key="item">{{ item }}</li>

예제

<template>
  <ul>
    <li v-for="fruit in fruits" v-bind:key="fruit">{{ fruit }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      fruits: ['Apple', 'Banana', 'Cherry'],
    };
  },
};
</script>

 

기본 배열 데이터로 리스트 만들고 index도 함께 출력해주기

v-for로 배열의 데이터뿐만 아니라 index도 출력해줄 수 있다. 첫번째 매개변수에는 데이터, 두번째 매개변수에는 index에 접근할 수 있다. 데이터와 인덱스에 접근할때 중괄호로 묶어준다.

items = ['a', 'b', 'c']
<li v-for="(item, index) in items" v-bind:key="item">{{ item }}</li>

예제

<template>
  <ul>
    <li v-for="(fruit, index) in fruits" v-bind:key="fruit">
      {{ fruit }}-{{ index }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      fruits: ['Apple', 'Banana', 'Cherry'],
    };
  },
};
</script>

 

배열 안에 객체가 있는 데이터로 리스트 만들어주기

배열 안에 객체가 있는 데이터 [{}, {}, {}]를 리스트로 만들어주는 작업은 아래와 같다.

items = [
  {id: 0, name: 'Apple'},
  {id: 1, name: 'Banana'},
  {id: 2, name: 'Cherry'}
]
<li v-for="item in items" v-bind:key="item.index">{{ item.name }}</li>

예제

<template>
  <ul>
    <li v-for="fruit in newFruits" v-bind:key="fruit.index">
      {{ 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>

 

shortio를 사용해서 key에 아이디값 부여해주기

index 값을 key로 설정하는 것은 생성된 리스트의 순서가 바뀌면 index 부여한 key가 섞이기 때문에 바람직하지 않다. index 대신 shortio라는 API를 사용해서 고유한 id값을 생성해 key 값으로 넣어주자.

shortio API 개발용으로 설치하기

npm

npm i -D shortio

yarn

yarn add -D shortio

패키지 불러오기

import shortid from 'shortid'

shortid.generate()로 랜덤한 아이디를 생성

shortid.generate()

예제

<template>
  <ul>
    <!-- key값으로 shortid.generate에서 받아온 랜덤한 아이디를 부여해주었다 -->
    <li v-for="fruit in newFruits" v-bind:key="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 => ({
        // shortid.generate()로 랜덤한 아이디를 생성
        id: shortid.generate(),
        name: fruit,
      }));
    },
  },
};
</script>

<style scoped></style>

객체 데이터 구조분해할당 해주며 리스트 랜더링하기

newFruits은 [{ id: ..., name:... }, { id: ..., name:... }, { id: ..., name:... }] 형태로 이루어진 배열이다. fruit in newFruits에서 fuirt은 배열안의 데이터 즉 객체이므로 구조분해할이 가능하다. fruit에 있는 id와 name을 구조분해할당으로 추출해 객체의 key에 바로 접근해준다.

<template>
  <ul>
    <li v-for="{ id, name } in newFruits" v-bind:key="id">
      {{ name }}-{{ id }}
    </li>
  </ul>
</template>

함수 생략

생략전

newFruits() {
  return this.fruits.map(fruit => {
    return {
      id: shortid.generate(),
      name: fruit,
    };
  });
}

생략후

return {} 생략 후 중괄호()로 감싸주기 

newFruits() {
  return this.fruits.map(fruit => ({
      id: shortid.generate(),
      name: fruit,
  }));
}