vue introduction - list rendering | 풀스택개발 EastFlag

페이지 목차

list rendering 이란?

자바스크립트 배열 데이터를 갖고 있고 있고 반복문을 사용하여 뷰에 display 하고자 하는것이 목적이다. 리액트는 순수하게 자바스크립트 문법만을 사용하여 구현하나, 뷰에는 반복문을 지원해주는 템플릿 문법이 있다. 템플릿 문법을 이용하여 간단하게 리스트를 렌더링해보는것이 목표이다.

스트링타입 배열 렌더링

var app = new Vue({
  el: '#app',
  data: {
    product: 'Socks',
    image: 'https://www.vuemastery.com/images/challenges/vmSocks-green-onWhite.jpg',
    inStock: true,
    details: ['80% cotton', '20% polyester', 'Gender-neutral']
  }
});

var app = new Vue({

el: '#app',

data: {

product: 'Socks',

image: 'https://www.vuemastery.com/images/challenges/vmSocks-green-onWhite.jpg',

inStock: true,

details: ['80% cotton', '20% polyester', 'Gender-neutral']

}

});

data에 details라는 스트링 배열과 variants라는 객체 배열이 있습니다. 이것을 뷰에 표시하는 문법은 다음과 같습니다. index는 배열의 인덱스가 필요한 경우 사용합니다.

v-for=”(item, index) in 컬렉션”

그리고, v-for가 들어간 부분이 반복된다는것도 기억하자.

<div id="app">
  <div class="product">
    <div class="product-image">
      <img :src="image">
    </div>

    <div class="product-info">
      <h1>{{ product }}</h1>
      <p v-if="inStock">In Stock</p>
      <p v-else="">Out of Stock</p>

      <ul>
        <li v-for="detail in details">{{ detail }}</li>
      </ul>
    </div>  
  </div>
</div>

</div>

<h1>{{ product }}</h1>

<p v-if="inStock">In Stock</p>

<p v-else="">Out of Stock</p>

<ul>

<li v-for="detail in details">{{ detail }}</li>

</ul>

</div>

객체 타입 배열 렌더링

var app = new Vue({
  el: '#app',
  data: {
    product: 'Socks',
    image: 'https://www.vuemastery.com/images/challenges/vmSocks-green-onWhite.jpg',
    inStock: true,
    details: ['80% cotton', '20% polyester', 'Gender-neutral'],
    variants: [
      {
        variantId: 2234,
        variantColor: 'green'
      },
      {
        variantId: 2235,
        variantColor: 'blue'
      }
    ]
  }
});

var app = new Vue({

el: '#app',

data: {

product: 'Socks',

image: 'https://www.vuemastery.com/images/challenges/vmSocks-green-onWhite.jpg',

inStock: true,

details: ['80% cotton', '20% polyester', 'Gender-neutral'],

variants: [

{

variantId: 2234,

variantColor: 'green'

{

variantId: 2235,

variantColor: 'blue'

}

]

}

});

<div id="app">
  <div class="product">
    <div class="product-image">
      <img :src="image">
    </div>

    <div class="product-info">
      <h1>{{ product }}</h1>
      <p v-if="inStock">In Stock</p>
      <p v-else="">Out of Stock</p>

      <ul>
        <li v-for="detail in details">{{ detail }}</li>
      </ul>

      <div v-for="variant in variants" :key="variant.variantId">
        <p>{{ variant.variantColor }}</p>
      </div>
    </div>  
  </div>
</div>

</div>

<h1>{{ product }}</h1>

<p v-if="inStock">In Stock</p>

<p v-else="">Out of Stock</p>

<ul>

<li v-for="detail in details">{{ detail }}</li>

</ul>

<p>{{ variant.variantColor }}</p>

</div>

객체 배열을 사용해서 객체의 variantColor을 display 해보자.

key 속성을 사용해서 뷰가 유니크한 dom에 접근하도록 해야 하는것이 권장사항이라는것도 기억하자.

+ Q1: (item, index) in 컬렉션 문법은 자바스크립트 문법인가?

+ todo

sizes 라는 배열 키가 있다. sizes: [‘S’, ‘M’, ‘L’, ‘XL’, ‘XXL’, ‘XXXL’] 이것을 사용해서 ul 태그 아래에 ul > li 태그로 이 값들을 리스트렌더링 하시오.

See the Pen Challenge 4 – Intro to Vue by Gregg Pollack (@GreggPollack) on CodePen.0