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

 

---

Vue.js에서 데이터 변경을 감시하여 자동으로 반영하려면 watch를 사용하면 됩니다.
아래는 질문의 코드를 수정하여 update_pereson 배열이 변경될 때마다 peresons 배열을 자동으로 갱신하도록 구현한 방법입니다. 블로그 글 형식으로 자연스럽게 설명하겠습니다.

---

Vue.js 애플리케이션에서 데이터가 변경될 때마다 특정 로직을 자동으로 실행하고 싶을 때가 있습니다. 예를 들어, 한 배열의 데이터가 갱신되면 다른 배열을 그에 맞춰 업데이트하고 싶을 때 말이죠. 이번에는 Vue 3의 컴포지션 API를 활용해 특정 데이터(update_pereson)의 변화를 감지하고, 이를 기반으로 기존 데이터(peresons)를 자동으로 갱신하는 방법을 알아보겠습니다.

원래 코드 살펴보기

질문에서 제공된 코드는 두 개의 배열, peresons와 update_pereson를 정의하고 있습니다. peresons는 초기 데이터이고, update_pereson는 갱신할 데이터를 담고 있죠. 버튼을 클릭하면 updatePersons 함수가 호출되어 update_pereson의 항목을 기준으로 peresons의 해당 항목을 갱신합니다.

하지만 요청하신 대로, 버튼 클릭 없이 update_pereson 배열이 변경될 때마다 자동으로 갱신되도록 만들고 싶습니다. 이 경우 Vue의 watch 기능을 사용하면 아주 간단하게 해결할 수 있습니다.

watch로 데이터 변경 감지하기

Vue 3의 watch는 반응형 데이터(ref나 reactive)의 변화를 감시하고, 변경이 감지되면 지정한 콜백 함수를 실행합니다. 여기서는 update_pereson 배열이 변경될 때마다 updatePersons 로직을 실행하도록 설정하겠습니다.

기존 코드를 수정한 전체 코드는 다음과 같습니다:

<script setup>
import { ref, watch } 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 };
    }
  });
};

// update_pereson 감시
watch(
  update_pereson,
  () => {
    updatePersons();
  },
  { deep: true } // 배열 내부 객체 변경 감지를 위해 deep 옵션 추가
);
</script>

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

변경된 부분 설명

1. watch 임포트: watch 기능을 사용하기 위해 vue에서 watch를 임포트했습니다.
2. watch 설정: watch 함수는 세 가지 인자를 받습니다:
   • 첫 번째는 감시할 대상, 여기서는 update_pereson입니다.
   • 두 번째는 변경 시 실행할 콜백 함수로, updatePersons를 호출하도록 했습니다.
   • 세 번째는 옵션 객체로, { deep: true }를 추가했습니다. 이 옵션은 배열 내부의 객체 속성 변경까지 감지하도록 합니다. 예를 들어, update_pereson.value[0].name이 바뀌는 경우에도 반응하도록 말이죠.
3. 버튼 제거: 이제 update_pereson이 바뀌면 자동으로 updatePersons가 호출되므로, <button> 요소와 @click 이벤트는 더 이상 필요하지 않습니다. 템플릿에서 제거했습니다.

어떻게 동작할까?

이제 update_pereson 배열에 새로운 항목이 추가되거나 기존 항목이 수정되면, watch가 이를 감지하고 즉시 updatePersons를 실행합니다. 결과적으로 peresons 배열이 실시간으로 갱신됩니다.

예를 들어, 어딘가에서 다음과 같이 update_pereson을 변경한다고 해봅시다:

update_pereson.value.push({ seqaNo: 1, name: 'Jane', age: 25 });

그러면 watch가 이 변화를 감지하고, updatePersons가 실행되어 peresons에서 seqaNo가 1인 항목이 { name: 'Jane', age: 25 }로 갱신됩니다.

추가로 고려할 점

• 성능: deep: true는 배열이나 객체의 깊은 변경을 감지하지만, 데이터가 크거나 복잡할 경우 성능에 영향을 줄 수 있습니다. update_pereson의 구조가 단순하다면 문제없지만, 대규모 데이터라면 감시 대상을 최적화하는 게 좋습니다.
• 특정 속성 감시: 만약 update_pereson의 특정 속성만 감시하고 싶다면, watch의 첫 번째 인자를 계산된 getter로 바꿀 수 있습니다. 예: () => update_pereson.value.map(item => item.name).

마무리

Vue 3의 watch를 사용하면 버튼 클릭 같은 수동 트리거 없이도 데이터 변경을 감지해 동적으로 UI를 갱신할 수 있습니다. 위 코드를 참고해 update_pereson의 변화를 실시간으로 peresons에 반영해보세요. 간단한 설정으로 훨씬 더 반응형인 애플리케이션을 만들 수 있을 겁니다!