vue3 pinia 메모리 누수 증가 개선코드

오류코드

import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useData365MastStore = defineStore('data365Master', () => {
  const data365Master = ref({});

  const getData365Master = (prdcd) => {
    return computed(() => data365Master.value);
  };

  return {
    data365Master,
    getData365Master
  };
});

개선코드

import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useData365MastStore = defineStore('data365Master', () => {
  const data365Master = ref({});

  // 단일 computed 속성으로 모든 데이터를 관리
  //const data365MasterComputed = computed(() => data365Master.value);

  // 개선된 getData365Master 함수
  const getData365Master = (prdcd) => {
    //return data365MasterComputed.value[prdcd];
    return data365Master.value[prdcd];
  };

  return {
    data365Master,
    getData365Master
  };
});

개선 사항 설명

1. 단일 computed 속성 사용:
   • data365MasterComputed라는 단일 computed 속성을 사용하여 전체 데이터 객체를 관리합니다. 이는 매 호출마다 새로운 computed 속성을 생성하지 않도록 합니다.
2. 효율적인 데이터 접근:
   • getData365Master 함수는 이제 단순히 data365MasterComputed에서 필요한 데이터를 반환합니다. 이는 메모리 사용을 최적화하고 성능을 향상시킵니다.

추가 고려사항

• 캐싱:
  • 자주 접근하는 데이터에 대해 캐싱을 적용하여 성능을 더욱 향상시킬 수 있습니다. 예를 들어, Map 객체를 사용하여 캐싱할 수 있습니다.
• 반응성 유지:
  • data365MasterComputed는 여전히 반응형이므로, data365Master가 변경될 때 자동으로 업데이트됩니다.
• 성능 모니터링:
  • 개발자 도구를 사용하여 성능을 모니터링하고, 필요에 따라 추가적인 최적화를 적용합니다.

이러한 개선을 통해 getData365Master 메소드가 1초마다 100번씩 실행되더라도 메모리 누수 없이 효율적으로 동작할 수 있습니다.