Vue반응형 데이터(Object) 업데이트하기

 

---

Vue.js의 Composition API는 직관적이고 유연한 방식으로 반응형 데이터를 관리할 수 있게 해줍니다. 오늘은 ref를 사용해 배열 데이터를 갱신하는 간단한 예제를 블로그 글 형식으로 소개하겠습니다. 예제를 통해 특정 조건에 맞는 데이터를 업데이트하는 방법을 알아보겠습니다.

문제 상황

우리는 아래와 같은 반응형 배열 데이터를 가지고 있습니다:

const peresons = ref([
  { seqaNo: 1, name: 'Jhon', age: 20 },
  { seqaNo: 2, name: 'Tom', age: 23 }
]);

이제 다음과 같은 업데이트 데이터를 받아서:

const update_pereson = ref([
  { seqaNo: 2, name: 'Michel', age: 32 }
]);

peresons 배열을 아래와 같이 갱신해야 합니다:

const peresons = ref([
  { seqaNo: 1, name: 'Jhon', age: 20 },
  { seqaNo: 2, name: 'Michel', age: 32 }
]);

즉, seqaNo가 일치하는 객체를 새로운 데이터로 교체하는 작업이 필요합니다.

 

 

해결 방법

Vue의 Composition API에서 ref로 관리되는 반응형 데이터를 갱신하려면, 배열의 특정 요소를 찾아 업데이트해야 합니다. 아래는 이를 수행하는 코드입니다:

<script setup>
import { ref } from 'vue';

// 초기 데이터
const peresons = ref([
  { seqaNo: 1, name: 'Jhon', age: 20 },
  { seqaNo: 2, name: 'Tom', age: 23 }
]);

// 업데이트 데이터
const update_pereson = ref([
  { seqaNo: 2, name: 'Michel', age: 32 }
]);

// 데이터 갱신 함수
const updatePersons = () => {
  update_pereson.value.forEach((updateItem) => {
    const index = peresons.value.findIndex(
      (person) => person.seqaNo === updateItem.seqaNo
    );
    if (index !== -1) {
      peresons.value[index] = { ...updateItem };
    }
  });
};

// 버튼 클릭 시 갱신 실행
</script>

<template>
  <div>
    <h2>Persons List</h2>
    <ul>
      <li v-for="person in peresons" :key="person.seqaNo">
        {{ person.name }} (Age: {{ person.age }})
      </li>
    </ul>
    <button @click="updatePersons">Update Persons</button>
  </div>
</template>

코드 설명

1. 반응형 데이터 정의:
   • ref를 사용해 peresons와 update_pereson 배열을 반/cleanly응형 데이터로 정의합니다.
   • peresons는 초기 데이터 배열이고, update_pereson는 갱신할 데이터를 포함합니다.
2. 업데이트 로직:
   • updatePersons 함수는 update_pereson.value 배열을 순회하며 각 업데이트 항목의 seqaNo와 일치하는 peresons 항목을 찾습니다.
   • findIndex 메서드로 해당 인덱스를 확인한 뒤, 일치하는 경우 peresons.value[index]를 새로운 객체로 교체합니다.
   • { ...updateItem }를 사용해 객체를 복사하여 반응성을 유지합니다.
3. 템플릿:
   • v-for로 peresons 배열을 렌더링하고, 버튼 클릭 시 updatePersons 함수를 호출해 데이터를 갱신합니다.

 

실행 결과

위 코드를 실행하면 초기 상태에서 Jhon과 Tom이 표시됩니다. "Update Persons" 버튼을 클릭하면 seqaNo: 2인 Tom이 Michel로 갱신되어 화면에 Jhon과 Michel이 표시됩니다.

주의사항

• 반응성 유지: peresons.value를 직접 수정할 때는 반응성을 잃지 않도록 주의하세요. 배열 요소를 교체하거나 push, splice 같은 메서드를 사용할 때 Vue가 변경을 감지합니다.
• 깊은 복사: { ...updateItem }를 사용해 새로운 객체를 생성하면 예기치 않은 참조 문제를 방지할 수 있습니다.
• 성능 고려: 데이터가 많아지면 findIndex가 비효율적일 수 있으니, 필요하다면 Map이나 객체를 사용해 최적화하세요.

마무리

Vue Composition API의 ref를 활용하면 반응형 데이터를 간단하고 명확하게 관리할 수 있습니다. 이번 예제에서는 배열 내 특정 객체를 조건에 맞게 갱신하는 방법을 다뤘습니다. 이 패턴은 리스트 기반의 애플리케이션에서 자주 사용되니, 자신의 프로젝트에 맞게 응용해보세요!