[Vue.js] 반응형 배열의 변경 메소드

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }}
      </li>
    </ul>
    <button @click="addItem">아이템 추가</button>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const items = reactive(['사과', '바나나', '딸기']);

    const addItem = () => {
      items.push('수박'); // 변경 메소드 중 하나인 push를 사용하여 아이템 추가
    };

    return { items, addItem };
  }
};
</script>

<style scoped>
/* 컴포넌트에만 적용될 스타일을 작성할 수 있습니다. */
</style>

Vue는 반응형 배열의 변경 메소드가 호출되는 것을 감지하여 자동으로 필요한 업데이트를 발생시킵니다. 반응형 배열에서 지원하는 변경 메소드 목록은 다음과 같습니다:

1. push: 배열의 끝에 하나 이상의 요소를 추가합니다.
2. pop: 배열의 끝에서 요소를 제거합니다.
3. shift: 배열의 첫 번째 요소를 제거합니다.
4. unshift: 배열의 앞에 하나 이상의 요소를 추가합니다.
5. splice: 배열의 요소를 추가 또는 제거합니다.
6. sort: 배열을 정렬합니다.
7. reverse: 배열의 순서를 뒤집습니다.

위 예제에서는 push 메소드를 사용하여 아이템을 추가하는 방법을 보여줍니다. Vue는 이러한 변경 메소드가 호출될 때마다 자동으로 UI를 업데이트하여 사용자에게 변경 사항을 반영합니다. 이를 통해 Vue는 개발자가 UI 업데이트에 직접 관여하지 않고도 상태의 변화를 감지하고 반응할 수 있습니다.