웹 애플리케이션을 구축하기 위한 컴포넌트 기반 아키텍처는 구축 및 유지 관리를 용이하게 합니다.
컴포넌트 간 통신을 촉진하는 한 가지 방법은 프롭과 슬롯을 활용하는 것 외에도 커스텀 이벤트의 방출을 이용하는 것입니다. 커스텀 이벤트를 사용하면 하위 컴포넌트에서 상위 컴포넌트로 데이터를 전송할 수 있습니다.
자식에서 부모로 이벤트 방출
Vue에서 제공하는 컴포넌트 간 통신은 다양한 방식으로 이루어지며, 그 중 주목할 만한 방법 중 하나는 부모 요소에서 자식 요소로 정보를 전송하는 데 프로퍼티를 활용하는 것입니다. 프롭을 사용하면 부모 컴포넌트에서 하나 이상의 하위 컴포넌트로 데이터를 전송할 수 있습니다.
자식 컴포넌트에서 부모 컴포넌트로 정보를 전송하고자 하는 경우 Vue는 자손에서 부모 컴포넌트로 사용자 지정 이벤트를 방출할 수 있는 기회를 제공합니다. 이 메커니즘을 통해 부모는 자식 컴포넌트에서 발생하는 데이터와 기능에 액세스하고 활용할 수 있습니다.
클릭 시 결과를 산출하는 버튼 요소가 있는 시나리오를 생각해 보겠습니다. 부모 컴포넌트가 결과를 인지하고 자신의 상태를 업데이트하거나 그에 따라 작업을 수행하기 위해서는 이벤트를 발생시켜 부모 컴포넌트에 이 사실을 알려야 합니다.
Vue에서 사용자 지정 이벤트에 대한 명명 규칙
이러한 이벤트를 방출하는 프로세스를 살펴보기 전에 Vue에서 사용자 지정 이벤트의 명명 규칙에 대한 이해가 중요합니다. Vue 3가 등장하기 전에는 개발자가 이러한 이벤트에 케밥 케이스를 사용하여 레이블을 지정하고 하이픈 문자를 사용하여 단어를 구분해야 하는 엄격한 프로토콜을 준수해야 했습니다.
HTML 템플릿을 사용할 때는 사용자 지정 이벤트를 케밥 케이스로 지정하는 것이 일반적입니다. 반면에 자바스크립트로 작업할 때는 낙타 케이스를 사용할 수 있습니다. 그럼에도 불구하고 이 선택은 컴파일 프로세스에 영향을 미치지 않습니다. Vue는 모든 사용자 정의 이벤트를 케밥 케이스로 자동 변환하기 때문입니다.
특히 여러 사람이 프로젝트에서 공동 작업하는 경우 이벤트의 목적을 명확하게 전달하는 데 도움이 되므로 트리거하는 사용자 지정 이벤트에 유익한 제목을 지정하는 것이 중요합니다.
하위 컴포넌트에서 상위 컴포넌트로 사용자 지정 이벤트를 방출하는 방법
Vue를 사용할 때 사용자 지정 이벤트를 생성하는 방법에는 기본적으로 두 가지가 있습니다. 첫 번째 접근 방식은 Vue에서 제공하는 $emit 메서드를 사용하여 Vue 템플릿 내에 직접 사용자 정의 이벤트를 통합하는 것입니다. 또는 Vue 3에서 액세스할 수 있는 defineEmits 매크로를 활용할 수도 있습니다.
$emit 메서드를 사용하여 Vue에서 사용자 지정 이벤트 방출
Vue.js에 내재된 $emit 메서드를 사용하면 하위 컴포넌트가 상위 컴포넌트에 이벤트를 전파할 수 있습니다. 이는 하위 요소의 템플릿 내에 메서드를 통합한 다음, 이벤트에 포함될 수 있는 추가 정보와 함께 전송할 이벤트 이름을 지정하면 됩니다.
하위 요소는 버튼 탐색과 관련하여 상위 구성 요소에 알리기 위해 이벤트를 방출하고 있습니다.
<!-- ChildComponent.vue -->
<script setup>
import { ref } from 'vue';
const post = ref('')
</script>
<template>
<div>
<input type="text" v-model="post">
<button v-on:click="$emit('button-clicked', post)">Post</button>
</div>
</template>
현재 코드 세그먼트는 하위 컴포넌트에서 사용자 지정 이벤트를 전파하는 프로세스를 보여줍니다. 하위 컴포넌트는 처음에 빈 문자열로 설정된 포스트 변수의 초기화를 시작합니다.
하위 컴포넌트는 v-model 지시문을 사용하여 입력 요소와 포스트 변수 간에 데이터 바인딩을 설정하여 입력 필드에 대한 모든 수정 사항을 포스트 변수의 업데이트된 값에 즉시 반영할 수 있도록 합니다.
버튼 요소에는 v-on 형태의 on 지시문이 장착되어 있으며, 이 지시문은 버튼에 대한 모든 클릭을 처리합니다. 클릭 이벤트를 수신하면 이 지시문은 두 개의 매개변수, 즉 “버튼 클릭”으로 레이블이 지정된 이벤트 이름과 post 변수의 값이 포함된 메시지를 전송합니다.
이제 부모 컴포넌트가 Vue 내에서 이벤트를 처리하는 데 사용되는 v-on 지시문을 활용하여 사용자 정의 이벤트에 주의를 기울일 수 있습니까?
<!-- ParentComponent.vue -->
import { ref } from "vue";
import ChildComponent from "./components/ChildComponent.vue";
const postList = ref([])
const addPosts = (post) => {
postList.value.push(post)
}
</script>
<template>
<div>
<ChildComponent @button-clicked="addPosts"/>
<ul>
<li v-for="post in postList">{{ post }}</li>
</ul>
</div>
</template>
현재 코드 스니펫은 부모 컴포넌트 내에서 자식 컴포넌트의 활용을 보여줍니다. 부모 컴포넌트는 postList 배열에 대한 반응형 참조를 설정합니다. 그 후, post 매개변수를 수신하면 실행되는 addPosts 함수를 정의합니다. 이 함수는 push() 메서드를 사용하여 주어진 게시물을 postList 배열에 추가합니다.
자식 컴포넌트 내의 버튼을 클릭하면 추가 포스트 함수를 활성화하는 사용자 정의 이벤트가 트리거됩니다. Vue에서 항목을 나열하는 데 사용되는 v-for 지시문은 이후 ul 요소에 첨부되어 postList 배열에 대한 반복을 활성화합니다.
defineEmits 매크로로 이벤트 발생하기
Vue 3에는 컴포넌트가 발생시킬 수 있는 이벤트를 의도적으로 정의하는 `defineEmits` 매크로가 도입되었습니다. 이 기능은 이벤트 방출에 대한 유형화된 접근 방식을 제공함으로써 체계적이고 안전한 코드 구조를 보장합니다.
다음에 대해 좀 더 설득력 있는 표현을 제공해 주시겠습니까? 부모 컴포넌트에서 호출하는 등 자식 컴포넌트 내에서 `defineEmits` 매크로를 활용하는 예를 들어주세요.
<!-- ChildComponent.vue -->
<script setup>
import { ref } from "vue";
const emit = defineEmits(["button-clicked"]);
const post = ref("");
const buttonClick = () => {
emit("button-clicked", post.value);
};
</script>
<template>
<div>
<input type="text" v-model="post" />
<button v-on:click="buttonClick">Post</button>
</div>
</template>
앞서 언급한 코드 스니펫과 $emit 함수의 코딩 규칙에는 주목할 만한 차이점이 존재합니다.
`defineEmits` 매크로는 버튼 클릭으로 트리거된 이벤트 발신에 대한 함수 래퍼를 생성합니다. 그런 다음 이 래퍼가 반환되고 컴포넌트 내에서 호출되어 매크로에서 이전에 정의한 이벤트의 방출을 활성화할 수 있습니다. 컴포넌트 내부에서 `defineEmits` 매크로를 사용하여 이벤트를 정의하면 상위 컴포넌트가 수신할 이벤트 목록 역할을 하는 배열에 이벤트가 추가됩니다.
코드 블록은 하위 컴포넌트의 템플릿 영역 내에서 버튼이 활성화되었음을 인식하는 “buttonClick”이라는 함수를 설정합니다. 이 함수는 “버튼 클릭” 이벤트와 “게시물” 객체라는 두 개의 개별 이벤트를 부모 컴포넌트로 다시 전송합니다. 하위 컴포넌트의 HTML 구조 내에는 사용자 상호작용 시 이 기능을 트리거하는 데 사용되는 버튼 요소가 있습니다.
버튼 요소는 사용자 상호 작용에 의해 트리거될 때 “버튼클릭” 기능을 활성화하는 “v-on:click”이라는 온클릭 지시문으로 구성됩니다. 이를 통해 부모 컴포넌트는 “$emit”을 사용하는 것과 유사하게 자식 컴포넌트를 활용할 수 있습니다.
Vue 개발자는 컴포넌트 기반 아키텍처의 이점을 누릴 수 있습니다.
“$emit” 메서드와 “defineEmits” 매크로를 함께 사용하여 컴포넌트 계층 구조 내에서 정보를 아래로 전송할 수 있습니다.
Vue의 컴포넌트 기반 아키텍처는 체계적이고 간결한 코드 작성을 용이하게 합니다. 이러한 장점은 컴포넌트 기반 디자인을 구현하기 위한 W3C 웹 표준인 웹 컴포넌트를 지원하는 Vue와 같은 최신 자바스크립트 프레임워크를 활용하면 활용할 수 있습니다.