Vue 3와 TypeScript로 인터랙티브한 InputTags 컴포넌트 개발하기

2024-12-03 02:13:55

vuejavascripttypescriptwebdev

Vue 3와 TypeScript로 인터랙티브한 InputTags 컴포넌트 개발하기

현대의 웹 애플리케이션에서 동적 리스트를 처리하는 것은 필수적입니다. 특히 사용자 인터랙션이 많은 환경에서는 태그를 추가하거나 제거하는 기능이 빈번히 사용됩니다. Vue 3와 TypeScript를 사용해 인터랙티브한 InputTags 컴포넌트를 개발하는 방법을 알아보겠습니다.

InputTags 컴포넌트 소개

이 컴포넌트는 단순히 태그를 추가하는 것을 넘어 사용자 경험을 향상시키기 위해 몇 가지 유용한 기능을 제공합니다. Vue 3와 TypeScript의 장점을 최대한 활용하여 생산적인 개발이 가능하도록 구성하였습니다.

InputTags 컴포넌트 기능 개요

태그 추가: 사용자가 Enter 키를 누르면 태그가 리스트에 추가됩니다.
태그 제거: 태그 옆의 버튼을 클릭하면 해당 태그가 제거됩니다.
이벤트 충돌 방지: SVG 아이콘 클릭 시 이벤트 전파를 제어하여 의도치 않은 동작을 방지합니다.

템플릿 코드 이해하기

템플릿에서는 Vue의 v-for 디렉티브를 사용하여 태그 리스트를 렌더링하고, 사용자 입력을 받아들이는 입력 필드를 제공합니다.

<template>
  <div class="flex items-center rounded border-2 border-gray-50 p-1">
    <div v-for="(tag, index) in tags" :key="index" class="bg-orange-100 inline-flex items-center text-sm rounded mr-1 overflow-hidden">
      <span class="ml-2 mr-1 leading-relaxed truncate max-w-xs px-1">{{ tag }}</span>
      <button class="w-6 h-8 inline-block align-middle text-gray-500 bg-orange-200 focus:outline-none" v-on:click="() => removeTag(index)">
        <svg class="w-3 h-3 text-orange-500 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" v-on:click.stop>
          <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z" />
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z" />
        </svg>
      </button>
    </div>
    <input class="h-8 focus:outline-none" type="text" placeholder="Add a tag" v-on:keyup.enter="addTag"/>
  </div>
</template>

스크립트 코드 분석하기

Vue의 컴포지션 API와 TypeScript를 사용하여 태그의 리스트를 관리합니다. 이를 통해 각종 동작을 쉽게 정의하고 타입 안정성을 높이게 됩니다.

<script setup lang="ts">
import { ref } from "vue";

const tags = ref<string[]>(["Vue.js", "JavaScript", "Frontend"]);

const addTag = (e: KeyboardEvent): void => {
  const input = (e.target as HTMLInputElement).value.trim();

  if (input) {
    tags.value.push(input);
  }

  (e.target as HTMLInputElement).value = "";
};

const removeTag = (index: number): void => {
  tags.value.splice(index, 1);
};
</script>

태그 추가 기능 설명

이벤트 트리거: keyup.enter 이벤트를 통해 Enter 키 입력을 감지합니다.
입력 처리: 입력된 값을 얻어와 정리(trim)한 후 비어 있는 지 확인합니다.
상태 업데이트: 유효하면 태그 배열에 추가합니다.
입력 초기화: 입력 필드의 값을 빈 문자열로 초기화합니다.

태그 제거 기능 설명

이벤트 트리거: 버튼 클릭 시 removeTag 메소드가 호출됩니다.
배열 수정: splice 메소드로 특정 인덱스의 태그를 제거합니다.

클릭 이벤트 충돌 방지 방법

버튼 내 SVG 아이콘을 클릭할 때 상위 버튼의 클릭 이벤트가 방지됩니다.
v-on:click.stop 사용: 이벤트 전파를 막아 의도치 않은 중복 처리를 방지합니다.

결론

Vue 3와 TypeScript를 활용한 InputTags 컴포넌트 구축은 이벤트 처리, 컴포지션 API, 동적 데이터 조작의 좋은 예시입니다. 이 컴포넌트는 필요에 따라 자유롭게 커스터마이즈할 수 있으며, 더 나은 사용자 경험을 제공합니다.

R_11

Vue 3와 TypeScript로 인터랙티브한 InputTags 컴포넌트 개발하기