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>에서 resultPopup을 v-for로 순회하며 저장된 데이터를 표시합니다. JSON.stringify를 사용해 객체를 문자열로 출력했습니다.
-
버튼 클릭 시 resultPopup에 데이터가 추가되고, 반응형 배열이므로 UI가 즉시 갱신됩니다.
-
4. 실행 결과
위 코드를 실행하면, 버튼을 클릭할 때마다 resultPopup 배열에 새로운 객체가 추가됩니다. 예를 들어:
-
"데이터 1 추가" 버튼 클릭:
resultPopup: [{ id: 1, name: "Item 1", value: "Test" }]
-
"데이터 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
'Vue.js 를 배워보자' 카테고리의 다른 글
태그 자신의 :속성 값을 확인하는 방법은 (1) | 2025.06.26 |
---|---|
TypeScript에서 두 객체의 공통 요소와 내포된 객체 복사하기 (0) | 2025.06.13 |
TypeScript와 Vue 3로 깔끔한 유효성 검증 구현하기 (0) | 2025.06.05 |
Vue 3와 TypeScript로 구현한 실무적인 발주서 작성 화면 (0) | 2025.05.31 |
Vue 3에서 팝업에서 데이터 가져와 자식 1-1에 표시하기 (0) | 2025.05.20 |