Vue.js this.$set 반응성 유지를 위한 방법

this.$set: 반응성 유지 위한 방법

Vue.js는 반응성 시스템을 통해 데이터의 변경을 감지하고 자동으로 화면을 업데이트 해줍니다. 객체의 속성을 변경하는 경우 Vue의 반응성이 정상 작동하지만, 특정 상황에서는 반응성이 제대로 작동하지 않을 수 있습니다. 이런 경우, `this.$set`을 사용하여 Vue에 변경 사항을 명시적으로 알려주어 반응성을 유지할 수 있습니다.

 

💁‍♂️ 객체의 속성을 변경은 아래 코드 처럼 간단히 값을 할당하면 됩니다. 

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'BEFORE',
    };
  },
  methods: {
    changeMessage() {
      this.message = 'AFTER';
    },
  },
};
</script>​

---

this.$set을 사용하는 경우

1. 배열에 인덱스로 값을 추가할 때

 Vue는 배열의 길이를 관찰할 수 있지만, 배열에 값을 추가할 때 일반적인 `인덱스로 할당`하면 반응성이 제대로 작동하지 않을 수 있습니다.

export default {
  data() {
    return {
      items: [
      			{ id: 1, name: 'Item 1' }, 
                { id: 2, name: 'Item 2' }
      ],
    };
  },
  methods: {
    addItem() {
      // 일반적인 방식으로 배열에 값을 추가하면 반응성이 제대로 작동하지 않음
      // this.items.push({ id: 3, name: 'Item 3' });

      // this.$set을 사용하여 배열에 값을 추가함
      this.$set(this.items, this.items.length, { id: 3, name: 'Item 3' });
    },
  },
};

 

2. 객체에 동적으로 속성을 추가할 때

Vue 인스턴스나 컴포넌트의 data 객체에 새로운 속성을 동적으로 추가하는 경우에도 this.$set을 사용해야 합니다. Vue는 인스턴스가 생성될 때 data 객체의 속성들만 반응성을 감지하기 때문에 동적으로 추가되는 속성은 반응성이 제대로 작동하지 않습니다.

export default {
  data() {
    return {
      dynamicData: {
        initialData: 'Initial Value',
      },
    };
  },
  methods: {
    addDynamicData(newData, newValue) {
      // 일반적인 방식으로 객체에 속성을 동적으로 추가하면 반응성이 제대로 작동하지 않음
      // this.dynamicData.newData = NewValue;

      // this.$set을 사용하여 객체에 동적으로 속성을 추가함
      this.$set(this.dynamicData, newData, newValue);
    },
  },
};