[LWC] Custom Event

CustomEvent란?
Custom Event는 자바스크립트에서 DOM을 조작할 때 기본적으로 지원하는 이벤트가 아닌 직접 원하는 때에 이벤트를 발생하고 싶을 때 사용된다.
LWC도 마찬가지로 Custom Event를 통해 사용자가 원하는 이벤트를 만들 수 있다.

1. 이벤트 생성

let customEvent = new CustomEvent('next');

new 키워드를 통해 Custom Event 객체를 생성해준다.
필자는 next라는 이벤트 이름으로 Custom Event를 생성하였다.



2. 이벤트 트리거

this.dispatchEvent(customEvent);

dispatchEvent 메소드를 통해 이벤트를 발생시킨다.



3. 이벤트 등록

<template>
	<c-sample-component onnext={hanldEvent}> </c-sample-component>
</template>

function handleEvent() {
	console.log('이벤트 호출됨.');
}

on키워드를 통해 event를 등록한다.
1) 위에서 next라는 이벤트를 생성했으므로 on키워드 뒤에 next를 붙여서 작성하고 해당 이벤트가 트리거 됬을 때, 실행할 함수를 등록해 주었다.
2) handleEvent 함수는 dispatchEvent를 통해 이벤트가 트리거 될 때 호출된다.



4. 이벤트를 통해 값 넘겨받기

<!-- childComponent.html -->
<template>
 <lightning-layout>
     <lightning-layout-item>
         <lightning-button
                 label="이름"
                 onclick={nameHandler}
         ></lightning-button>
         <lightning-button
                 label="주소"
                 onclick={addressHandler}
         ></lightning-button>
 </lightning-layout>
</template>

// childComponent.js
function nameHandler() {
	let nameEvent = new CustomEvent('name', {detail:{first:'kim', last:'jangHoon'}});
	this.dispatchEvent(nameEvent);
}

function addressHandler() {
	let addressEvent = new CustomEvent('address', {detail:'incheon'});
	this.dispatchEvent(addressEvent);
}

childComponent에서 각 버튼이 눌리면 해당 Custom Event가 발생한다.
CustomEvent의 detail 프로퍼티에 원하는 값을 넣어서 전달 할 수 있다.

전달받는 방법에는 2가지가 있다. on 키워드를 통한 방법, 혹은 eventListener를 통한 이벤트 방법이 있다.


1) on 키워드를 통한 방법

<!-- parentComponent.html -->
<template>
	<c-child-component onname={nameHandle} onaddress={addressHandle}> 
  </c-child-component>
</template>

// parentComponent.js
function nameHandle(event) {
	console.log('FirstName : ' + event.detail.first);
	console.log('LastName : ' + event.detail.last);
}

function addressHandle(event) {
	console.log('Address : ' + event.detail);
}

parentComponent에서는 자식에서 이벤트가 발생하면, 부모 컴퍼넌트에 등록해논 함수의 event 객체에 child에서 전달한 값을 받을 수 있다.

2) EventListener를 통한 방법

<!-- parentComponent.html -->
<template>
	<c-child-component> 
  </c-child-component>
</template>

// parentComponent.js
constructor() {
    super();
    /*
    this.template.addEventListener('name', evt => {
    	console.log(evt.detail.name);
    });
    this.template.addEventListener('address', evt => {
    	console.log(evt.detail.address);
    });
    */  
	this.template.addEventListener('name', this.nameHandler);
	this.template.addEventListener('address', this.addressHandler);
}

function nameHandler (event) {
	console.log('FirstName : ' + event.detail.first);
	console.log('LastName : ' + event.detail.last);  
}

function addressHandler (event) {
	console.log('Address : ' + event.detail);
}

원리는 1번 방법과 동일하다.
작성방법만 조금 다른데, on키워드가 아닌 부모 컴퍼넌트의 LWC 생성자(constructor) 안에 받을 이벤트를 등록해준다.