한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online를 들으며 정리한 내용입니다.

리스트 렌더링

vue3 - 리스트렌더링

1. V-for

v-for 디렉티브를 사용하여 배열을 기반으로 리스트를 렌더링 할 수 있습니다. v-for 디렉티브는 item in items 형태로 특별한 문법이 필요합니다. 여기서 items는 원본 데이터 배열이고 item은 반복되는 배열 엘리먼트의 별칭입니다.

<template>
  <ul>
    <li
      v-for="fruit in fruits"
      :key="fruit">
      {{ fruit }}
    </li>
  </ul>
</template>

위의 코드는 v-for라는 디렉티브를 이용해서 furits라는 배열 데이터의 아이템을 반복적으로 출력하고 있습니다.

    <li
      v-for="(fruit, index) in fruits"
      :key="fruit">
      {{ fruit }}-{{ index }}
    </li>

이렇게 필요에 따라서 배열의 아이템이 반복되는 순서를 두 번째 매개변수처럼 이름을 지정해서 요소의 내부에서 사용을 할 수 있습니다. 그리고 이러한 변수들은 함수의 매개변수처럼 언제든지 이름을 바꿔서 사용을 할 수 있습니다.

2. v-for 활용 (배열데이터=>객체데이터)

<template>
  <ul>
    <li
      v-for="fruit in newFruits"
      :key="fruit.id">                  //key값은 고유한 값이 들어가야합니다!!
      {{ fruit.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return{
      fruits: ['Apple','Banana','Cherry']
    }
  },
  computed: {
    newFruits() {
      return this.fruits.map((fruit, index) => {
        return {
          id: index,
          name: fruit
        }
      })
    }
  }
}
</script>

앞으로 다룰 많은 데이터들은 fruits와 같은 단순한 배열구조가 아닌 위의 코드의 newFruits처럼 배열 데이터 안에 객체 데이터가 있고, 그 객체 데이터 안에는 복잡한 구조로 여러가지 속성들로 데이터가 구분되어 있는 형태로 제공되는 다양한 배열 데이터를 활용하게 될 것입니다.

또한 vue.js에서 v-for라는 디렉티브로 배열데이터를 출력할 때는 반드시 id와 같이 각각의 배열데이터를 고유하게 구분해줄 수 있는 속성이 존재해야하며, 그 속성을 통해서 각각의 배열데이터를 구분해줄 수 있어야지만 화면에 출력되는 내용을 최적화할 수 있습니다.

3. shortid 패키지

앞서 설명드렸듯이 배열데이터를 고유하게 구분해줄 수 있는 속성이 있어야하는데, shortid라는 패키지를 통해 짧은 고유의 아이디를 손쉽게 만들 수 있습니다.

$ npm i -D shortid

<template>               
  <ul>
    <li
      v-for="{ id, name } in newFruits"      //객체구조분해를 통해 코드를 보다 간결하게 작성할 수 있습니다.
      :key="id">
      {{ name }}-{{ id }}
    </li>
  </ul>
</template>

<script>
import shortid from 'shortid'   ---(1)//shortid를 가져옵니다
export default {
  data() {
    return{
      fruits: ['Apple','Banana','Cherry']
    }
  },
  computed: {
    newFruits() {
      return this.fruits.map(fruit => ({
          id: shortid.generate(),    ---(2) 간단한 아이디를 생성해주는 메소드인 gentrate메소드를 실행합니다.
          name: fruit
        }))
    }
  }
}
</script>

4. 배열 변경 감지

vue.js가이드 문서에서 조금 더 자세한 내용을 확인할 수 있습니다.

변이 메소드

Vue는 감시중인 배열의 변이 메소드를 래핑하여 뷰 갱신을 트리거합니다. 여기서 이야기하는 뷰 갱신을 트리거 한다는 이야기는 배열의 데이터를 바꿔놓으면 화면에 실제로 갱신되어 출력되는 반응성을 이야기 하는 것입니다. 래핑된 메소드는 다음과 같습니다.

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

배열 교체

이름에서 알 수 있듯이 변이 메소드는 호출된 원본의 배열을 변경합니다. 이에 비해 filter(), concat() and slice()와 같은 원래 배열을 변경하지는 않지만 항상 새 배열을 반환하는 비-변이 메소드도 있습니다. 비-변이 메소드로 작업할 때 이전 배열을 새 배열로 바꿀 수 있습니다:

example1.items = example1.items.filter(item => item.message.match(/Foo/))

이로 인해 Vue가 기존 DOM을 버리고 전체 목록을 다시 렌더링할 것이라고 생각할 수 있습니다. 다행히도 그렇지 않습니다. Vue는 DOM 요소 재사용을 최대한 효율적으로 관리 하기 위해서 몇 가지 smart heuristics(스마트 휴리스틱, 과학적인 조건보다는 경험이나 직관에 의해 똑똑하게 의사결정을 하는 방식)을 구현하므로, 배열을 겹치는 객체를 포함하는 다른 배열로 교체하는 것은 매우 효율적인 작업입니다.

결국 기존의 어떠한 특정 배열 데이터를 새로운 배열 데이터로 다시 할당하더라도 vue.js내부에서 최적화가 되어 화면에 내용이 출력이 되며 큰 부담 없이 사용을 할 수 있습니다.