Vue TypeScript 프로젝트에서 내보내기 이벤트를 사용하는 방법

Vue는 멋진 웹 애플리케이션을 구축하기 위한 가장 유연하고 유연하며 강력한 JavaScript 프레임워크 중 하나입니다. Vue의 가장 중요한 개념과 주요 기능 중 하나는 애플리케이션 구성 요소 간의 통신을 촉진하는 기능입니다. Vue의 "방출" 개념에 대해 자세히 알아보고 이를 통해 상위 구성 요소와 하위 구성 요소 간의 유연하고 원활한 통신이 어떻게 활성화되는지 살펴보겠습니다.

Vue에서 방출되는 것은 무엇입니까?

Vue 애플리케이션 아키텍처의 핵심 개념 중 하나는 구성 요소 간의 상위-하위 관계입니다. 상위 구성요소는 하위 구성요소와 상호작용해야 하는 경우가 많으며 그 반대의 경우도 마찬가지입니다. 우리는 이 개념을 활용하여 복잡하고 고도로 대화형인 사용자 인터페이스를 만듭니다. props는 상위 구성 요소에서 하위 구성 요소로 데이터 흐름을 만드는 반면, "방출"은 하위 구성 요소에서 상위 구성 요소로 데이터 흐름을 만듭니다.

기본적으로 "방출"은 하위 구성 요소가 상위 구성 요소와 통신할 수 있도록 하는 Vue의 개념입니다. Vue에서 내보내기를 사용할 때 데이터(선택 사항)가 포함된 맞춤 이벤트를 상위 구성 요소로 내보낼 수 있습니다. 상위 구성 요소는 이벤트를 수신하고 이에 따라 자체 "응답"을 처리할 수 있습니다. 이는 하위 구성요소와 상위 구성요소 간의 원활한 통신을 촉진하는 강력한 메커니즘입니다!

방출이 유용한 이유

방출은 구성 요소가 상위 구성 요소와 상호 작용할 수 있는 구조화되고 분리된 방법을 제공합니다. 이를 통해 유지 관리 및 확장이 더 쉬운 애플리케이션이 생성됩니다. 내보내기를 활용하면 상위 구성 요소에 긴밀하게 연결하지 않고도 재사용 가능한 하위 구성 요소를 생성할 수 있으므로 다양한 컨텍스트에서 사용할 수 있습니다.

방출은 하위 구성 요소와 상위 구성 요소 간의 높은 수준의 분리를 달성하는 데 중요한 역할을 합니다. 하위 구성 요소가 상위 구성 요소에 이벤트를 내보내면 상위 구성 요소의 상태를 직접 조작하거나 상위 구성 요소의 메서드를 호출하지 않습니다. 대신, 이미터는 상위 구성 요소가 이러한 이벤트를 처리하는 방법을 결정할 수 있도록 하는 추상화 계층을 제공합니다. 제 생각에는 이러한 관심의 분리가 아키텍처를 더욱 유지 관리하고 확장 가능하게 만드는 데 도움이 됩니다!

컴포넌트 통신

Vue는 구성 요소화된 아키텍처를 따르며 사용자 인터페이스를 구성 요소라고도 알려진 더 작은 독립형 단위로 나눕니다. 구성 요소를 중첩하고 결합하여 복잡한 애플리케이션을 구축할 수 있습니다. 그러나 구성 요소가 중첩되고 애플리케이션이 성장함에 따라 구성 요소 간의 통신이 필수적이 됩니다! 구성 요소 통신을 통해 다양한 구성 요소가 데이터를 교환하고 작업을 트리거하며 애플리케이션 전체에서 일관된 애플리케이션 상태를 유지할 수 있습니다.

Vue에서 컴포넌트가 통신하도록 하는 방법에 대한 간단한 예를 살펴보겠습니다.

하위 어셈블리

<template>
 <button @click="sendMessageToParent">Send Message to Parent</button>
</template>

<script setup>
import { defineEmits } from 'vue';

const emit = defineEmits(['messageToParent']);

const sendMessageToParent = () => {
const message = 'Hello from child!';
emit('messageToParent', message);
}
</script>

상위 구성 요소

<template>
  <div>
    <child-component @message-to-parent="handleMessageFromChild" />
    <p>Message from child: {
    
    { messageFromChild }}</p>
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';

const messageFromChild = ref('');

const handleMessageFromChild = (message) => {
  messageFromChild.value = message;
}
</script>

이 예에는 버튼을 클릭할 때 메시지 페이로드와 함께 messageToParent라는 사용자 정의 이벤트를 내보내는 ChildComponent가 있습니다. ParentComponent는 생성된 이벤트를 수신하고 수신된 메시지( messageFromChild )로 상태를 업데이트합니다.

ChildComponent에서 "부모에게 메시지 보내기" 버튼을 클릭하면 sendMessageToParent 함수가 실행되어 "Hello from child!" 메시지가 포함된 사용자 지정 이벤트를 페이로드로 내보냅니다.

ParentComponent는 템플릿의 @messageToParent 속성을 통해 생성된 이벤트를 수신하고 handlerMessageFromChild 함수를 사용하여 이를 처리합니다. 그런 다음 메시지 페이로드는 messageFromChild 참조에 저장되며, 이는 템플릿을 자동으로 업데이트하여 하위 구성 요소의 메시지를 표시합니다.

간단하죠? 이는 Vue에서 구성 요소가 "서로 대화"하도록 만드는 방법을 보여줍니다. 문자열을 페이로드로 보내는 것에만 국한되지 않고 객체, 배열 등과 같은 복잡한 유형도 보낼 수 있습니다.

Typescript에서 유형 추론을 올바르게 사용하는 방법

내보내기 사용의 한 가지 "단점"은 사용자 정의 이벤트를 내보낼 때 하위 구성 요소가 무엇을 내보낼지 반드시 알 수 없다는 것입니다. 이러한 불확실성은 데이터 유형 및 런타임 오류와 관련된 잠재적인 문제로 이어질 수 있습니다. 다행히 TypeScript와 결합된 Vue 3의 Composition API는 이 문제에 대한 매우 강력한 솔루션을 제공합니다. 내보내기를 올바르게 입력하면 유형 안전성을 보장하고 코드 명확성을 향상하며 Vue 애플리케이션을 더 쉽게 유지 관리할 수 있습니다.

Vue 3의 Composition API 및 스크립트 설정을 사용하여 TypeScript로 내보내기를 올바르게 입력하는 방법을 살펴보겠습니다.

하위 구성 요소(TypeScript 사용):

<template>
  <button @click="sendDataToParent">Send Data to Parent</button>
</template>

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

// Define the interface for the emitted object 
// (Ideally a shared interface for both components)
// This could event get exported, fot the parent component can import it
interface ItemData {
  id: number;
  name: string;
  quantity: number;
}

const emit = defineEmits<{
  // Define the emitted event and its payload type
  (event: 'dataToParent', payload: ItemData[]): void;
}>();

function sendDataToParent() {
  const payload: ItemData[] = [
    { id: 1, name: 'Item 1', quantity: 3 },
    { id: 2, name: 'Item 2', quantity: 5 },
    { id: 3, name: 'Item 3', quantity: 2 },
  ];

  emit('dataToParent', payload);
}
</script>

상위 구성 요소: (TypeScript 사용)

<template>
  <div>
    <test-child @data-to-parent="handleDataFromChild" />
    <div v-if="itemsFromChild.length">
      <p v-for="item in itemsFromChild" :key="item.id">Item: {
    
    { item.name }} | Quantity: {
    
    { item.quantity }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import TestChild from '@/TestChild.vue';

// Define the interface for the emitted object 
// (Ideally a shared interface for both components)
interface ItemData {
  id: number;
  name: string;
  quantity: number;
}

const itemsFromChild = ref<ItemData[]>([]);

const handleDataFromChild = (payload: ItemData[]) => {
  itemsFromChild.value = payload;
};
</script>

TypeScript의 강력한 기능을 활용하여 구성 요소 간의 통신이 정확하고 유형이 안전한지 확인할 수 있습니다. 인터페이스와 정확한 페이로드 유형 정의를 사용하여 개발 중에 잠재적인 버그를 포착하는 동시에 코드 완성과 애플리케이션의 전반적인 유지 관리성을 향상할 수 있었습니다!

마치다

글의 지면적 제약으로 인해 오늘의 내용은 이곳에서 공유하겠습니다. 도움이 필요한 더 많은 사람들이 볼 수 있도록 좋아요를 누르고 전달해 주세요. 동시에, 프론트엔드 기술에 대해 더 많은 지식을 얻고 싶다면 저를 따르십시오. 여러분의 지원은 제가 공유하는 가장 큰 동기가 될 것입니다. 계속해서 더 많은 콘텐츠를 출력할 예정이니 지켜봐 주시기 바랍니다.

팬혜택

아름다운 BootStrap 5 배경 관리 소스 코드를 공유하세요