Vue.js 를 배워보자

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

_Blue_Sky_ 2025. 6. 20. 19:58
728x90

 

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>에서 resultPopupv-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를 자동으로 갱신하고, 헬퍼 함수로 데이터 관리를 간편하게 했습니다. 이 패턴은 팝업 데이터뿐 아니라 다양한 동적 데이터를 관리할 때 유용합니다.
궁금한 점이 있다면 언제든 댓글로 물어보세요!

 

 
728x90