[Vue] Vue로 만드는 직방 웹앱 : 3. v-for 반복문 보니까 HTML도 프로그래밍 언어네

안녕하세요

 

이전 포스팅에 이어서 이번 포스팅까지 시간이 좀 걸렸습니다.

바쁘긴 했는데 핑계겠죠,,

앞으로는 좀 더 열심히 해보겠습니다.

 

해당 프로젝트의 전체 소스는

https://github.com/zziaho/vuedongsan

GitHub - zziaho/vuedongsan: Vue로 만드는 직방웹앱

에 올려두고 있으니 필요하시면 참고하시면 좋을거같습니당~

 

---

 

1. Vue에서 배열을 다루는 방법

 

이번 시간의 내용을 진행하기 전에 vue에서 배열을 다루는법을 먼저 간단하게 알아보겠습니다.

  data() {
    return {
      products : ['역삼동원룸', '천호동원롬', '마포구원룸'],
    }

위 코드처럼 선언하여 배열을 사용 할 수 있습니다.

 

  <div>
    <h4 :style="blueFont">{{ products }}</h4>
    <p>{{ price1 }} 만원</p>
  </div>

이후 동일하게 콧수염을 통해 지정후 사용할 수 있고, 이렇게 하면

이처럼 배열 전체를 출력하게 됩니다. 배열의 첫번째 인덱스의 값을 사용하고 싶으면

  <div>
    <h4 :style="blueFont">{{ products[1] }}</h4>
    <p>{{ price1 }} 만원</p>
  </div>

인덱스 값을 지정해 주면 되고,

이처럼 첫번째 인덱스 값인 '천호동원룸'이 찍히는것을 볼 수 있습니다.

 

---

 

2. Vue에서 반복문 사용하기

 

그런데 이렇게 하나하나 인덱스 값을 바인딩해서 사용하면 효율이 많이 떨어지겠죠.

vue가 가진 장점중 하나가 반복적인 구조를 가진 HTML 요소들을 깔끔하게 반복문으로 처리할 수 있다는 점입니다.

 

이러한 장점을 이용해서 상단 Nav 메뉴를 만들어보도록 하겠습니다.

<div class="menu">
  <a>Home</a>
  <a>Products</a>
  <a>About</a>
</div>
  
  
.menu {
  background: darkslateblue;
  padding: 15px;
  border-radius: 5px;
}

.menu a {
  color: white;
  padding: 10px;
}

vue 로고 이미지 상단에 Home, Products, About 세가지 메뉴의 상단바를 만들고

style 태그 사이에 menu에 대한 스타일을 지정해줍니다.

그러면 이렇게 상단바가 생긴 모습을 확인할 수 있습니다.

 

이렇게 우리가 코드를 짜다보면 상단바 코드를 예로들었을 경우 a태그가 반복되는것처럼 HTML 태그가 반복되는 경우가 발생합니다.

개수가 적으면 손으로 하나하나 칠 수도 있겠지만 만약 개수가 어마어마하게 많아진다거나 했을경우엔 처음 작성하는데도 오래걸리고 이후에 유지보수하는데도 효율성이 매우 떨어질것입니다.

이럴때는 기능을 통해서 축약을 하는것이 좋습니다.

vue가 제공하는 기능을 통해서 축약해보겠습니다

<태그 v-for="작명 in 횟수" :key="작명">

v-for를 활용해서 태그를 반복해서 찍어줄 수 있습니다.

작명은 원하는대로 자유롭게 작성하시면 되고 이후에 :key="작명"을 선언해서 에러가 나지 않도록 설정합니다.

 

저는 작명을 menu 라고 했고, 3번 반복했기 때문에 Home이 3번 찍히는 모습을 확인할 수 있습니다.

 

근데 이렇게하면 Home만 3개 생기니까 좀,,,, 그렇네요

저는 Products랑 About도 만들어야하는데 쓸모없는거 아닌가 싶습니다....

 

라고 생각하실까봐 횟수에 데이터도 넣을 수 있도록 기능을 제공하고있습니다.

 

1. Vue 반복문 특 1

Vue 반복문에는 array 또는 object도 집어넣을 수 있는데, 넣은 자료안의 데이터 개수만큼 반복됩니다.

이렇게 반복문을 작성하면 '작명'한 변수는 데이터안의 하나하나의 자료가 됩니다.

즉, 작명을 {{ }} 으로 바인딩하면 각각의 데이터를 가져와서 사용할 수 있어집니다.

 

실제로 해보겠습니다.

그럼 먼저 메뉴생성에 필요한 정보들을 data()란에 생성하겠습니다.

data(){
  return {
    menus: ['Home', 'Shop', 'About'],
  }
}

 

 

그리고 위에서 설명했던 것 처럼 횟수 자리에 menus를 집어넣고 각각 태그에 작명(menu)를 바인딩합니다.

  <div class="menu">
    <a v-for="menu in menus" :key="menu">{{ menu }}</a>
  </div>

위처럼 잘 찍히는것을 볼 수 있습니다.

 

위에서 간략하게 ":key를 설정하지 않으면 에러가 나니까 같이 써라" 라고 했는데, 실제 용도를 좀 더 자세하게 알아보겠습니다.

반복문 돌린 요소를 컴퓨터가 구분할 수 있도록 하기위해 사용하는것입니다.

그래서 보통 변화하는 값 ex) 0, 1, 2.... 이런식으로 합니다.

 

2) Vue 반복문 특 2 : 변수 작명 2개까지 가능

그럼 이 변화하는 값을 어떻게 설정하느냐???

Vue 반복문에서는 변수를 2개까지 설정이 가능한데

  <div class="menu">
    <a v-for="(menu, index) in menus" :key="index">{{ menu }}</a>
  </div>

위처럼 왼쪽변수에는 array내의 데이터, 오른쪽변수는 0부터 시작하는 1씩 증가하는 정수로 설정할 수 있습니다.

 

index가 실제로 증가하는지 확인해보기 위해서 바인딩에 menu 대신 index를 넣고 실행하면

이렇게 실제로 증가하는것을 확인 할 수 있습니다.

 

 

---

 

출처

https://www.youtube.com/@codingapple

코딩애플

 

https://www.youtube.com/watch?v=T4N9wjx7_E4