Vue 3와 TypeScript로 동적 키-값 쌍을 배열에 저장하기: <script setup> 방식

 

Vue 3의 <script setup> 문법과 TypeScript를 활용해 동적 키-값 쌍을 배열 형태로 관리하는 방법을 소개합니다. 이 글에서는 resultPopup 배열에 팝업에서 선택된 데이터를 가변적으로 추가하는 예제를 다룹니다. 초보자도 쉽게 따라 할 수 있도록 간단한 코드와 함께 설명합니다.

키워드: Vue 3, TypeScript, script setup, 동적 키-값, 배열 관리, 팝업 데이터, 반응형

---

목표

resultPopup 배열에 팝업에서 선택된 데이터를 키-값 쌍 객체로 저장하고, 이를 배열 형태로 관리합니다. 키와 값은 가변적이므로 어떤 형태의 데이터든 추가할 수 있어야 합니다. TypeScript로 타입 안전성을 보장하고, Vue 3의 <script setup> 문법을 사용해 간결하게 구현합니다.

---

 

 

 

1. 프로젝트 설정

Vue 3 프로젝트에서 TypeScript를 사용한다고 가정합니다. Vite와 같은 빌드 도구를 사용해 프로젝트를 설정했다면, 아래와 같은 기본 구조를 갖췄을 것입니다:

bash

 

src/
  ├── components/
  ├── store/
  │   └── popupData.ts
  ├── App.vue

popupData.ts 파일에 resultPopup 배열과 관련 로직을 정의하고, Vue 컴포넌트에서 이를 사용합니다.

---

2. resultPopup 배열 정의

먼저, resultPopup 배열과 데이터를 추가하는 함수를 popupData.ts에 정의합니다. TypeScript를 사용해 타입 안전성을 확보합니다.

// src/store/popupData.ts
import { ref } from 'vue';

// 동적 키-값 쌍을 위한 인터페이스
interface PopupData {
  [key: string]: any; // 키는 문자열, 값은 어떤 타입이든 가능
}

// 반응형 resultPopup 배열
export const resultPopup = ref<PopupData[]>([]);

// 데이터 추가 함수
export function addPopupData(data: PopupData) {
  resultPopup.value.push(data);
}

• 설명:
  • PopupData 인터페이스는 동적 키-값 쌍을 정의합니다. [key: string]: any로 모든 타입의 값을 허용합니다.
  • ref를 사용해 resultPopup을 반응형 배열로 만듭니다. Vue의 반응형 시스템 덕분에 배열이 변경될 때 UI가 자동으로 업데이트됩니다.
  • addPopupData 함수는 새로운 데이터를 배열에 추가합니다.

---

3. Vue 컴포넌트에서 사용하기

이제 <script setup>을 사용하는 Vue 컴포넌트에서 resultPopup을 활용해 팝업 데이터를 추가하고 표시합니다. 

<!-- src/components/PopupManager.vue -->
<script setup lang="ts">
import { resultPopup, addPopupData } from '../store/popupData';

// 팝업에서 선택된 데이터 추가
const handlePopupSelection = (data: { [key: string]: any }) => {
  addPopupData(data);
};
</script>

<template>
  <div>
    <h2>팝업 데이터 관리</h2>
    <!-- 데이터 추가 버튼 -->
    <button @click="handlePopupSelection({ id: 1, name: 'Item 1', value: 'Test' })">
      데이터 1 추가
    </button>
    <button @click="handlePopupSelection({ type: 'modal', status: 'active' })">
      데이터 2 추가
    </button>

    <!-- 저장된 데이터 표시 -->
    <h3>저장된 데이터</h3>
    <ul>
      <li v-for="(item, index) in resultPopup" :key="index">
        {{ JSON.stringify(item) }}
      </li>
    </ul>
  </div>
</template>

• 설명:
  • <script setup>은 간결한 문법으로 컴포넌트를 정의합니다. lang="ts"로 TypeScript를 활성화했습니다.
  • handlePopupSelection 함수는 팝업에서 선택된 데이터를 받아 addPopupData로 배열에 추가합니다.
  • <template>에서 resultPopup을 v-for로 순회하며 저장된 데이터를 표시합니다. JSON.stringify를 사용해 객체를 문자열로 출력했습니다.
  • 버튼 클릭 시 resultPopup에 데이터가 추가되고, 반응형 배열이므로 UI가 즉시 갱신됩니다.

---

 

 

4. 실행 결과

위 코드를 실행하면, 버튼을 클릭할 때마다 resultPopup 배열에 새로운 객체가 추가됩니다. 예를 들어:

1. "데이터 1 추가" 버튼 클릭: 

   resultPopup: [{ id: 1, name: "Item 1", value: "Test" }]

2. "데이터 2 추가" 버튼 클릭: 
    

   resultPopup: [
     { id: 1, name: "Item 1", value: "Test" },
     { type: "modal", status: "active" }
   ]

UI에는 각 객체가 <li> 태그로 표시됩니다.

---

5. 추가 기능: 데이터 관리

resultPopup 배열을 더 효과적으로 관리하려면 아래와 같은 헬퍼 함수를 추가할 수 있습니다:

typescript

 

// src/store/popupData.ts
// 특정 키로 데이터 검색
export function findPopupData(key: string, value: any): PopupData | undefined {
  return resultPopup.value.find(item => item[key] === value);
}

// 데이터 삭제
export function removePopupData(index: number) {
  resultPopup.value.splice(index, 1);
}

• 사용 예시: 
   

  <script setup lang="ts">
  import { resultPopup, addPopupData, removePopupData } from '../store/popupData';
  
  const deleteData = (index: number) => {
    removePopupData(index);
  };
  </script>
  
  <template>
    <div>
      <ul>
        <li v-for="(item, index) in resultPopup" :key="index">
          {{ JSON.stringify(item) }}
          <button @click="deleteData(index)">삭제</button>
        </li>
      </ul>
    </div>
  </template>

• 설명:
  • findPopupData는 특정 키-값 쌍으로 데이터를 검색합니다.
  • removePopupData는 배열에서 특정 인덱스의 데이터를 삭제합니다.
  • <template>에 삭제 버튼을 추가해 각 항목을 삭제할 수 있습니다.

---

6. 팁과 주의사항

• 타입 제한: PopupData의 값 타입을 특정 타입(예: string | number)으로 제한하려면 인터페이스를 수정하세요: 
   

  interface PopupData {
    [key: string]: string | number;
  }

• 데이터 영속성: resultPopup 데이터를 브라우저에 저장하려면 localStorage를 사용하세요: 
   

  export function saveToLocalStorage() {
    localStorage.setItem('resultPopup', JSON.stringify(resultPopup.value));
  }
  
  export function loadFromLocalStorage() {
    const stored = localStorage.getItem('resultPopup');
    if (stored) {
      resultPopup.value = JSON.parse(stored);
    }
  }

• 성능 고려: resultPopup 배열이 커질 경우, 검색 및 삭제 성능을 최적화하려면 인덱싱이나 Map 객체를 고려하세요.

---

결론

Vue 3의 <script setup>과 TypeScript를 사용해 resultPopup 배열에 동적 키-값 쌍을 추가하는 방법을 살펴봤습니다. 반응형 배열(ref)를 활용해 UI를 자동으로 갱신하고, 헬퍼 함수로 데이터 관리를 간편하게 했습니다. 이 패턴은 팝업 데이터뿐 아니라 다양한 동적 데이터를 관리할 때 유용합니다.

궁금한 점이 있다면 언제든 댓글로 물어보세요!

---