> For the complete documentation index, see [llms.txt](https://simplevue.gitbook.io/intro/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://simplevue.gitbook.io/intro/04.-loop-condition.md).

# 04.  v-for 를 이용한 리스트 렌더링

## Loop 를 이용한 리스트 렌더링

state 와 props 에 따른 component 제어에 대해 학습합니다.

### Loop 

아래와 같이 비슷한 패턴의 component 가 반복될 때 어떻게 구성하는 것이 좋을까요?

```javascript
<Item>
<Item>
<Item>
<Item> x 100 
```

위 처럼 모든 component 를 그려주는 방법도 있지만, loop 를 이용하면 손쉽게 반복되는 component 를 구성할 수 있습니다.&#x20;

![다음 웹툰 페이지](/files/-LZK4hNiHVEK8kgqdIjY)

#### 1. 프로젝트 구성

직접 실습해보며 loop 사용법을 알아보겠습니다.&#x20;

> (예제는 [이전의](https://simplevue.gitbook.io/intro/02.-component#undefined-3) 초기 구성되었던 환경에서 시작합니다.)

![App.vue](/files/-LZJw0b4AypEBkcZEidh)

![localhost:8080](/files/-LZJw8GohxJR9QM25_UI)

#### 2. 데이터를 준비

component 를 구성하기 위해 webtoon 데이터를 준비합니다.

```javascript
// App.vue 

export default {
  data() {
    return {
      webtoons: [
        {
          name: "햄스터와 그녀",
          link: "http://webtoon.daum.net/webtoon/view/hamsterandher",
          img:
            "http://t1.daumcdn.net/webtoon/op/478cdf37f585607982ffa9e35b432e8503be8a54"
        },
        {
          name: "프롬 스타",
          link: "http://webtoon.daum.net/webtoon/view/fromstar",
          img:
            "http://t1.daumcdn.net/webtoon/op/a7fb953d722c1130bfc18440f7e3ce448ece57a1"
        },
        {
          name: "위대한 로맨스",
          link: "http://webtoon.daum.net/webtoon/view/greatromance",
          img:
            "http://t1.daumcdn.net/webtoon/op/a816281cb4df5c50a20ac386fd6e496643d0f085"
        },
        {
          name: "빛나는 손을",
          link: "http://webtoon.daum.net/webtoon/view/Hand",
          img: "http://t1.daumcdn.net/cartoon/5913FCAC0234C50001"
        }
      ]
    };
  }
};
```

#### 3. Component 준비

`Webtoon.vue` component 를 만듭니다. Webtoon component 는 Webtoon 데이터를 props 로 받습니다.

```javascript
// Webtoon.vue 

<template>
  <div>
    <h2>Webtoon</h2>
    <ul class="wrap"></ul>
  </div>
</template>

<script>
export default {
  props: {
    items: { type: Array, default: () => [] }
  }
};
</script>

<style>
</style>
```

`App.vue` 에서 component 를 불러오고 props 를 전달해줍니다.  App 의 state (webtoons) 를 webtoon 에게 props 로 데이터를 넘겨줍니다.

```javascript
// App.vue 

<template>
  <div id="app">
    <Webtoon :items="webtoons"/> 
  </div>
</template>

<script>
import Webtoon from "./components/Webtoon";

export default {
  components: {
    Webtoon
  }
  // data .....
}
</script>
```

![webtoon component ](/files/-LZJzX6FVNcmsCZMw6hM)

#### 4. Loop 를 이용하여 component 구성하기

`v-for` 라는 디렉티브를 이용하여 리스트를  렌더링 할 수 있습니다.

```javascript
<div v-for="i in 10" :key={i}>{i}</div>
```

아래와 같이 리스트가 구성됩니다. 리스트 렌더링 되는 component 는 항상 `key` 라는 props 값이 필요합니다.\
`key` 가 필요한 이유를 간단하게 설명드리자면 가상돔에서 리스트 component 에서 변경된 부분을 감지할 때 저 key  라는 값을 이용하기 때문에 리스트 렌더링시에는 항상 `key` 라는 값이 필요합니다.

![](/files/-LZK-cARvxuIS1z-zPi5)

위에서 알아본 방법을 바탕으로 webtoon component 를 구성해보겠습니다.

```javascript
// webtoon.vue

<template>
  <div>
    <h2>Webtoon</h2>
    <ul class="wrap">
      <li class="item" v-for="(item, idx) in items" :key="{idx}">
        <a :href="item.link" target="_blank">
          <img :src="item.img">
          <span class="tit">제목: {{item.name}}</span>
        </a>
      </li>
    </ul>
  </div>
</template>
```

1. v-for 를 이용하여 item 리스트를 렌더링 합니다. (item: 객체, idx: 배열의 인덱스), key 값은 인덱스 값을 이용합니다.
2. `:href` , `:src` 같이 기본 태그에 `:` 가 붙어 있는걸 볼 수 있습니다. `:` 가 붙으면 "" 영역이 JS 영역으로 변경됩니다. 그렇기 때문에 `item` 객체에 접근할 수 있는 것 입니다.

![구성된 화면](/files/-LZK5lF8cfxPUVpFdx_q)

#### 5. 스타일 입히기

Webtoon component 에 style 을 입혀보겠습니다.

```javascript
// Webtoon.vue 

<style scoped>
h2 {
  text-align: center;
}

a {
  list-style: none;
  text-decoration: none;
}

li {
  list-style: none;
}

.wrap {
  max-width: 450px;
  width: 100%;
  margin: 0 auto;
}

.item {
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 25px;
}

.tit {
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
  color: #000;
  padding: 20px 15px;
}

img {
  width: 100%;
  background: #ebebeb;
  border-radius: 4px;
}
</style>
```

![](/files/-LZK8tjVhcTJtRHZI0hh)

### 마무리

`v-for` 를 이용하여 간단하게 리스트를 렌더링하는 방법을 배워봤습니다. \
다음 챕터에는 `v-if`, `v-show` 를 이용하여 조건부 렌더링하는 방법을 알아보겠습니다.

참고: [공식문](https://kr.vuejs.org/v2/guide/list.html)