> 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)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://simplevue.gitbook.io/intro/04.-loop-condition.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.