개발 도구 (Development Tools)/Vue

Vue 반복문(v-for) 사용하는 방법

BiCute 2022. 8. 29. 08:00
반응형

 

1. 앞으로 만들어 볼 것들

그러고 보니 기능 설명만 하다 보니 어떤 것을 만들지 정하질 않은 것 같습니다.

기왕이면 뭐라도 만들면서 진행하는것이 재밌으니 앞으로의 대략적인 방향은 블로그 메인 화면에선 게시물의 제목과 작성 날짜가 보이게 하고, 제목을 클릭하면 내부 내용을 표시해주는것을 목표로 진행할 예정입니다.

 

이전 글(Vue 데이터 바인딩하는 방법)을 기준으로 하여 여러 개의 글의 제목과 작성일을 표시해주도록 만들어 보았습니다.

<template>
  <MainHeader />

  <div class="blogPost">
    <p>{{ title[0] }}</p>
    <p>{{ date[0] }}</p>
  </div>
  <div class="blogPost">
    <p>{{ title[1] }}</p>
    <p>{{ date[1] }}</p>
  </div>
  <div class="blogPost">
    <p>{{ title[2] }}</p>
    <p>{{ date[2] }}</p>
  </div>

</template>

<script>
import MainHeader from './components/MainHeader.vue'

export default {
  name: 'App',
  components: {
    MainHeader
  },
  data(){
    return{
      title: ["게시물 제목1", "게시물 제목2", "게시물 제목3"],
      date: ["2022.02.08", "2022.02.16", "2022.08.26"]
    }
  },
}
</script>

<style scoped>
.blogPost {
  width: 100%;
  height: 4rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-bottom: 1px solid gray;
}

@media (min-width: 640px) {
  .blogPost { max-width: 640px; }
}

@media (min-width: 768px) {
  .blogPost { max-width: 768px; }
}

@media (min-width: 1024px) {
  .blogPost { max-width: 1024px; }
}

@media (min-width: 1280px) {
  .blogPost { max-width: 1280px; }
}

@media (min-width: 1536px) {
  .blogPost { max-width: 1536px; }
}
</style>

 

원하는 느낌대로 표시는 잘 되고 있지만, 뭔가 이상합니다.

  (1) 게시물이 100개, 1000개가 된다면 <template>저렇게 하나하나 직접 적어줄 수도 없을뿐더러,

  (2) 제목 따로 날짜 따로 저렇게 데이터를 담아버리면 어떤 게 어떤 것의 데이터인지 하나만 빠져도 다 꼬여버리게 됩니다.

조금씩 수정해 보도록 하겠습니다.

 

 

2. 데이터 수정

  HTML영역보다 우선 데이터의 형식을 사용하기 좋게 변경해 보겠습니다.

  제목 따로, 글 따로, 날짜 따로 이렇게 하지 말고,

  게시물(post)이라는 배열 하나하나에 각각 제목(title)과 내용(contents), 그리고 작성일(data)을 담는 방식으로 변경합니다.

 data() {
    return {
      post: [
        {
          title: "게시물 제목 1",
          contents: "게시물 내용 1",
          date: "2022.02.08"
        },
        {
          title: "게시물 제목 2",
          contents: "게시물 내용 2",
          date: "2022.02.16"
        },
        {
          title: "게시물 제목 3",
          contents: "게시물 내용 3",
          date: "2022.08.26"
        }
      ],
    }
  },

 

 

3. 데이터 바인딩

  이제 정상적으로 불러올 수 있는지 우선 확인부터 해봅니다. 

  아무 위치에나 {{ post }} 데이터를 불러와 봅시다.

<template>
  <MainHeader />

  <div class="blogPost">
    {{ post }}  //  <-- 데이터 바인딩
  </div>

</template>

배열에 담긴 내용을 모두 잘 출력해주고 있습니다.

이제 필요한 부분만 꺼내 쓰면 됩니다.

우선 첫 번째 글만 완성시켜 봅시다.

 

  <div class="blogPost">
    <p>제목: {{ post[0].title }}</p>
    <p>작성일: {{ post[0].date }}</p>
  </div>

위와 같이 작성하면 post라는 배열의 0번째 오브젝트에서 title이란 내용을 불러오고,

post라는 배열의 0번째 오브젝트에서 date값을 불러옵니다.

이제 계획한대로 나타납니다

 

이제부터 동일한 형태의 내용이 반복되기 때문에 반복문을 사용하여 게시물을 만들어 봅시다

 

 

4. Vue의 반복문(v-for)

 

  vue에서 반복문은 다음과 같은 형식으로 사용합니다

v-for="(item, index) in items" :key="index"

(1) items는 배열이며 items 배열의 데이터 수만큼 반복하게 됩니다.

(2) 소괄호() 안의 item과 index는 원하는 대로 작명하면 됩니다. 

(3) 소괄호() 안의 item은 그 반복하는 시점의 배열을 나타내며, 배열의 현제 index를 index에 담아줍니다. 

(4) 반복되는 요소에는 각각 다른 고유한 값을 주라고 권유하기 때문에 :key=""값에 주로 index를 적어줍니다.

  (:key값을 적지 않으면 오류가 납니다)

 

위 내용을 대충 정리해서 작성하면 다음과 같은 형식으로 쓸 수 있습니다.

<template>
  <MainHeader />

  <div v-for="(item, index) in post" :key="index" class="blogPost">
    <p>제목: {{ item.title }}</p>
    <p>작성일: {{ item.date }}</p>
  </div>

</template>

조금만 더 풀어서 적어보면 아래와 같겠네요.

  (1) post란 배열의 개수만큼 반복하며, item이란 이름으로 각각의 해당 데이터를 가져올 것이다.

  (2)item은 오브젝트 형식으로 되어있으니 제목에는 item에 있는 title을, 작성일에는 item에 있는 date라는 항목을 표시해라 (데이터 바인딩) 

 

이렇게 코드를 작성하면 자동으로 게시물의 숫자만큼 반복되기 때문에 게시물이 늘어나면 알아서 더 추가해주고 줄어들어도 알아서 줄여주기 때문에 더 이상 게시물의 개수에 관해선 신경 쓰지 않아도 됩니다.

 

자바스크립트의 반복문과의 차이점은

  item은 그 반복할 때의 배열을 나타내기 때문에 [0], [1] 같은 순번은 필요 없다는 것과,

  배열(여기서는 post)의 개수만큼 자동으로 반복되기 때문에 post.length 같은 조건이 필요 없다

  그리고 :key값을 적어줘야 한다.

정도겠네요.

 

 

이번 게시물까지의 최종 결과

 

 

 

반응형