[Vue.js] Vue 리스트 렌더링 (List Rendering)

리스트 렌더링 (List Rendering)

 

# v-for​

v-for 디렉티브를 사용하면 배열을 리스트로 렌더링할 수 있음.

item in items 형식의 문법을 사용하는데, items는 배열, item은 배열 내 반복되는 요소의 별칭.

→ Vue.js에서 반복문을 사용 시,  :key 속성이 필수

Vue가 각 노드의 ID를 추적 및 기존 엘리먼트를 재사용, 재정렬할 수 있도록 각 항목에 대해 고유한 key 속성 필요.

<li v-for="item in items">
  {{ item.message }}
</li>

<script>
  export default{
    data() {
      return {
        parentLangs: 'Web',
        items:[
          {id:1, title:'HTML', desc:'HTML is...'},
          {id:2, title:'CSS', desc:'CSS is...'},
          {id:3, title:'Javascript', desc:'Javascript is...'}
        ]
      }
    }
  }
</script>

<template>
  <div class="layout">
    <h1>This is List Rendering page</h1>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

또한 v-for는 현재 아이템의 인덱스를 가리키는 선택적 두 번째 별칭도 지원.

<li v-for="(item, index) in items">
  {{ parentMessage }} - {{ index }} - {{ item.message }}
</li>

# 객체에 v-for 사용

v-for를 객체의 속성 반복에 사용할 수 있음.

<script>
  export default{
    data() {
      return {
        myObject: {
          title: 'Vue에서 목록을 작성하는 방법',
          author: '홍길동',
          publishedAt: '2016-04-10'
        }
      }
    }
  }
</script>

<template>
<h2>객체에 v-for 사용하기</h2>
<ul>
  <li v-for="value in myObject" :key="value.id">
    {{ value }}
    {{ console.log(value) }}
  </li>
</ul>
</template>

 

 

# 숫자 범위에 v-for 사용

정수 사용 가능. 이 경우 1...n 범위를 기준으로 템플릿을 여러 번 반복.

<template>
    <h2>숫자 범위에 v-for 사용하기</h2>
    <span v-for="n in 10" :key="n">{{ n }}</span>
</template>

 

 

# template에서 v-for 사용

<template> 태그에 v-for를 사용하여 여러 엘리먼트 블록을 렌더링.

<template>
	<ul>
    <template v-for="item in items" :key="item.id">
      <li>{{ item.desc }}</li>
    </template>
  </ul>
</template>

 

 

# 필터링

methods / computed을 잘 구분하여 사용.

<script>
  export default{
    data() {
      return {
        numbers: [1, 2, 3, 4, 5],
        sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
      }
    },
    computed: {
    evenNumbers() {
      console.log('evenNumbers 실행')
      return this.numbers.filter(n => n % 2 === 0)  
      //computed: numbers안의 값이 변경될 때만 실행
      }
    },
    methods: { 
      even(numbers) {
        console.log('even 실행')
        return numbers.filter(number => number % 2 === 0)
        //methods: data함수 내 어느 값이 변경되던 실행(무조건 실행)
      }
    }
  }
</script>

<template>
    <h2>필터링</h2>
    <ul>
    	<li v-for="n in evenNumbers" :key="n">{{ n }}</li>
    </ul>
    <button @click="numbers.push(2)">+</button>

    <ul v-for="numbers in sets" :key="numbers"> 
    	<!-- 반복문 안에 반복문 -->
    	<li v-for="n in even(numbers)" :key="n">{{ n }}</li>
    </ul>
    <button @click="sets[0].push(2)">+</button>
</template>

even은 두번 실행

 

 

# methods / computed의 차이

methods에 기술된 함수의 값에 변경 없어도 무조건 호출될 때마다 실행

computed는 기술된 함수의 값이 변경되어야 실행(종속성이 변경될 때만 재계산)

 

 

methods 버튼 클릭 시, 둘 다 실행

computed 버튼 클릭 시, computed만 실행 → even 4로 변화

→ 불필요한 재계산 x

→주변의 값이 변경되던 재실행하려면 methods에 작성하고, 그 값 변경 시에만 실행하려면 computed에 작성