LWC의 이벤트는 구성 요소와 통신하는 데 사용됩니다. 관련된 구성요소가 있으면 상위에서 하위로, 하위에서 상위로 통신이 가능할 수 있습니다. 관련되지 않은 두 개의 구성 요소가 있는 경우 PubSub(Publish-Subscribe) 모델 또는 Lightning Message Service(LMS)를 통해 통신할 수 있습니다. 이 가이드에서는 PubSub 모델을 사용하여 부모에서 자식으로, 자식에서 부모로의 이벤트 및 상호 관련된 구성 요소와 통신하는 방법에 대해 설명합니다.
레코드 페이지, 앱 페이지 또는 홈 페이지에 구성 요소를 배치할 수 있습니다. 예제 코드 조각에서는 이 파일(meta-xml)을 다시 지정하지 않습니다.
XML 버전 = '1.0' ?>
< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< api버전 > 57.0 api버전 >
< 노출됨 > 진실 노출됨 >
< 목표 >
< 표적 > 번개__레코드 페이지 표적 >
< 표적 > 번개__앱페이지 표적 >
< 표적 > 번개__홈페이지 표적 >
목표 >
LightningComponent번들 >
부모와 자녀 간의 의사소통
두 구성 요소가 서로 관련되어 있으면 이러한 통신이 가능합니다. 여기서 부모는 데이터를 자식에게 보냅니다. 상위 구성 요소에는 하위 구성 요소가 포함됩니다. 이 접근 방식을 사용하면 기본 데이터(정수, 문자열, 부울 등)를 부모에서 자식으로 전달할 수 있고, 비기본 데이터(배열, 객체, 객체 배열 등)를 부모에서 자식으로 전달할 수 있습니다. 상위에 대한 작업이 포함된 하위 구성요소.
부모를 자식에게 전달하려면 자식 구성 요소에서 사용할 수 있는 필드, 속성 및 메서드를 공개적으로 표시해야 합니다. 이는 'api' 데코레이터를 사용하여 필드, 속성 및 메서드를 장식함으로써 가능합니다.
예 : Child 컴포넌트 “js” 파일에 “api”로 변수를 선언합니다.
@ API 변수 ;
이제 상위 구성 요소는 HTML 속성을 통해 HTML 파일의 하위 구성 요소를 사용합니다.
예 : 상위 HTML 파일의 변수를 사용합니다.
< 씨 - 어린이 - comp 변수 > 씨 - 어린이 - 광고 >
부모와 자식 간의 의사소통 방법을 설명하는 몇 가지 예를 살펴보겠습니다.
예시 1:
이 기본 예는 부모가 자식에게 보낸 정보를 얻는 방법을 보여줍니다.
childtComp.js
먼저 공개적으로 사용 가능한 '정보' 변수를 보유하는 하위 구성요소를 만듭니다.
// api 데코레이터를 사용하여 변수를 공개로 선언합니다.@ API 정보
다음 스크린샷에서 전체 'js' 코드를 볼 수 있습니다.
childtComp.html
이제 HTML 파일의 중앙 태그에 이 변수를 지정합니다.
< 주형 >< 번개 - 카드 제목 = '어린이' >
< 센터 >
< 비 > { 정보 } 비 >
센터 >
번개 - 카드 >
주형 >
parentComp.js
'js' 파일에서는 아무 작업도 수행하지 않습니다.
parentComp.html
일부 텍스트와 함께 공개 변수(정보)를 전달하여 이전 하위 구성 요소를 상위 HTML에 배치합니다.
< 주형 >< 번개 - 카드 제목 = '부모의' 상 - 이름 = '표준:계정' >
< 씨 - 아이 - 광고
정보 = '안녕하세요. 정보를 얻었습니다...'
> 씨 - 아이 - 광고 >
번개 - 카드 >
주형 >
산출:
이제 Salesforce 조직으로 이동하여 상위 구성 요소를 '레코드' 페이지에 배치하세요. 하위 구성요소가 상위 구성요소로부터 정보를 수신한 것을 볼 수 있습니다.
예 2:
상위 구성 요소의 UI에서 동적으로 텍스트를 받아들이는 두 개의 입력 텍스트 필드를 만들어 보겠습니다. 상위 구성 요소에 첫 번째 텍스트를 삽입하면 하위 구성 요소는 이 텍스트를 대문자로 받습니다. 마찬가지로 두 번째 텍스트를 삽입하면 소문자로 된 텍스트를 받습니다.
childtComp.js
트랙 데코레이터를 사용하여 두 개의 변수(information1 및 information2)를 만듭니다.
- 첫 번째 입력 텍스트를 대문자로 변환하는 'api' 데코레이터를 사용하여 ConvertToUpper() 메서드를 만듭니다.
- 두 번째 입력 텍스트를 소문자로 변환하는 'api' 데코레이터를 사용하여 ConvertToLower() 메서드를 만듭니다.
@ 트랙정보2 ;
@ API
변환으로상위 ( 실제정보1 ) {
이것 . 정보1 = 실제정보1. to대문자 ( ) ;
}
@ API
변환으로낮음 ( 실제정보1 ) {
이것 . 정보2 = 실제정보1. toLowerCase ( ) ;
}
전체 'js' 코드는 다음과 같습니다.
childtComp.html
'js' 파일에서 가져온 값(Information1 및 Information2)을 표시합니다.
< 주형 >< 번개 - 카드 제목 = '어린이' >
대문자 :& NBSP ; < 비 > { 정보1 } 비 >< br >
소문자 :& NBSP ; < 비 > { 정보2 } 비 >
번개 - 카드 >
주형 >
parentComp.js
querySelector()를 통해 하위 HTML 템플릿을 선택하는 두 가지 처리기 메서드를 만듭니다. 텍스트를 대문자나 소문자로 변환하는 올바른 메서드를 전달해야 하는지 확인하세요.
핸들이벤트1 ( 이벤트 ) {이것 . 주형 . 쿼리선택기 ( 'c-childt-comp' ) . 변환으로상위 ( 이벤트. 표적 . 값 ) ;
}
핸들이벤트2 ( 이벤트 ) {
이것 . 주형 . 쿼리선택기 ( 'c-childt-comp' ) . 변환으로낮음 ( 이벤트. 표적 . 값 ) ;
}
전체 'js' 코드는 다음과 같습니다.
parentComp.html
두 가지 모두에 대한 핸들 이벤트가 포함된 입력 텍스트를 만듭니다. 이 상위 구성 요소에 하위 구성 요소를 배치합니다.
< 주형 >< 번개 - 카드 제목 = '부모의' >
< 센터 >
< 번개 - 입력 라벨 = '문자를 소문자로 입력하세요' 변경시 = { 핸들이벤트1 } > 번개 - 입력 >
센터 >
< br >< br >
< 센터 >
< 번개 - 입력 라벨 = '문자를 대문자로 입력하세요' 변경시 = { 핸들이벤트2 } > 번개 - 입력 >
센터 >
< br >< br >< br >
< 씨 - 아이 - 광고 > 씨 - 아이 - 광고 >
번개 - 카드 >
주형 >
산출:
이제 Salesforce 조직으로 이동하여 상위 구성 요소를 '레코드' 페이지에 배치하세요.
UI에 두 개의 텍스트 입력이 표시됩니다.
첫 번째 입력에 텍스트를 작성하면 해당 텍스트가 대문자로 변환되어 Child 구성 요소에 표시되는 것을 볼 수 있습니다.
두 번째 입력에 텍스트를 쓰면 텍스트가 소문자로 변환되어 Child 구성 요소에 표시되는 것을 볼 수 있습니다.
자녀와 부모 간의 의사소통
이전 통신과 유사하게 하위 항목을 상위 항목에 전달하려면 두 구성 요소가 서로 관련되어야 합니다. 세 가지 다른 접근 방식으로 자식을 부모에게 전달할 수 있습니다. 간단한 이벤트를 사용하여 부모를 자식에게 호출하고 데이터 및 이벤트 버블링이 포함된 이벤트를 사용하여 부모를 자식에게 호출합니다. 이 가이드에서는 간단한 이벤트를 살펴보겠습니다.
하위 항목을 상위 항목에 전달하려면 이벤트를 생성하고 전달해야 합니다. 이를 위해서는 맞춤 이벤트를 생성해야 합니다. 커스텀 이벤트는 본인이 직접 생성한 이벤트입니다. new 키워드를 사용하여 만들 수 있습니다. Event_Name은 무엇이든 가능합니다(대문자나 숫자를 넘지 않는 문자열일 수 있음). 지금은 옵션에 대해 논의하지 않겠습니다.
통사론 : new CustomEvent('이벤트_이름',{옵션…})
이제 맞춤 이벤트가 생겼습니다. 다음 단계는 이벤트를 전달하는 것입니다. 이벤트를 전달하려면 EventTarget.dispatchEvent() 메서드에서 생성한 이벤트를 지정해야 합니다.
통사론 : this.displatchEvent(new CustomEvent('Event_Name',{options…})
마지막으로 이벤트를 처리해야 합니다. 이제 상위 구성 요소에서 하위 구성 요소를 호출해야 합니다. 이벤트 이름에 'on' 접두사를 지정하여 이벤트 이름을 전달합니다. 이는 이벤트 리스너 핸들러를 사용합니다.
통사론:
< 씨 - 어린이 - yourEventName의 구성 요소 = { 리스너 핸들러 } > 씨 - 어린이 - 요소 >예:
이 예에서는 하나의 상위 구성 요소(exampleParent)와 두 개의 하위 구성 요소를 만듭니다.
- 첫 번째 Child(exampleChild)에서는 사용자가 일부 텍스트를 제공할 수 있는 입력 텍스트를 만듭니다. 동일한 텍스트가 상위 구성 요소에 대문자로 표시됩니다.
- 두 번째 Child(child2)에서는 사용자가 텍스트를 제공할 수 있는 입력 텍스트를 만듭니다. 동일한 텍스트가 상위 구성 요소에 소문자로 표시됩니다.
exampleChild.js
세부정보를 대상 값으로 사용하여 'linuxhintevent1' CustomEvent를 생성하는 handlerChange1 메서드를 만듭니다. 그런 다음 이 이벤트를 전달합니다. 이 'js' 파일에 다음 스니펫을 삽입하세요.
//이벤트 처리핸들변경1 ( 이벤트 ) {
이벤트. 방지기본값 ( ) ;
const 이름1 = 이벤트. 표적 . 값 ;
const 선택이벤트1 = 새로운 맞춤 이벤트 ( '리눅스힌트이벤트1' , {
세부 사항 : 이름1
} ) ;
이것 . 파견이벤트 ( 선택이벤트1 ) ;
}
exampleChild.html
기존 “js”에서 생성된 핸들 메소드는 HTML 컴포넌트의 라이트닝 입력을 기반으로 처리됩니다.
< 주형 >< 번개 - 카드 제목 = '아이 1' >
< div 수업 = 'slds-m-around_medium' >
< 번개 - 입력 라벨 = '텍스트를 소문자로 입력하세요' 변경시 = { 핸들변경1 } > 번개 - 입력 >
div >
번개 - 카드 >
주형 >
child2.js
세부사항을 대상 값으로 사용하여 'linuxhintevent2' CustomEvent를 생성하는 handlerChange2 메소드를 생성합니다. 그런 다음 이 이벤트를 전달합니다.
핸들변경2 ( 이벤트 ) {이벤트. 방지기본값 ( ) ;
const 이름2 = 이벤트. 표적 . 값 ;
const 선택이벤트2 = 새로운 맞춤 이벤트 ( '리눅스힌트이벤트2' , {
세부 사항 : 이름2
} ) ;
이것 . 파견이벤트 ( 선택이벤트2 ) ;
}
child2.html
기존 “js”에서 생성된 핸들 메소드는 HTML 컴포넌트의 라이트닝 입력을 기반으로 처리됩니다.
< 주형 >< 번개 - 카드 제목 = '아이 2' >
< div 수업 = 'slds-m-around_medium' >
< 번개 - 입력 라벨 = '텍스트를 대문자로 입력하세요' 변경시 = { 핸들변경2 } > 번개 - 입력 >
div >
번개 - 카드 >
주형 >
exampleParent.js: 이 코드 조각을 클래스 내부의 'js' 파일에 포함하세요.
- HandleEvent1()의 toUpperCase() 함수를 사용하여 입력을 대문자로 변환하고 Information1 변수에 저장합니다.
- HandleEvent2()의 toLowerCase() 함수를 사용하여 입력을 소문자로 변환하고 Information2 변수에 저장합니다.
// toUpperCase() 함수를 사용하여 입력을 대문자로 변환합니다.
// handlerEvent1()에 저장하고 Information1 변수에 저장합니다.
핸들이벤트1(이벤트) {
const input1 = 이벤트.세부사항;
this.Information1 = input1.toUpperCase();
}
@트랙정보2;
// toLowerCase() 함수를 사용하여 입력을 소문자로 변환합니다.
// handlerEvent2()에 저장하고 Information2 변수에 저장합니다.
handlerEvent2(이벤트) {
const input2 = 이벤트.세부사항;
this.Information2 = input2.toLowerCase();
}
exampleParent.html
이제 두 하위 구성 요소를 모두 지정하여 상위 HTML 구성 요소에 두 개의 변수(Information1 및 Information2)를 표시합니다.
<템플릿><번개 카드 제목 = '부모의' >
< div 수업 = 'slds-m-around_medium' >
대문자로 표시된 Child-1 메시지: < 비 > {정보1} < / 비 >< br >
Child-2 소문자 메시지: < 비 > {정보2} < / 비 >< br >
< / 비 >< br >
< / div >
< / 번개카드>
< / 템플릿>
산출:
이제 Salesforce 조직으로 이동하여 상위 구성 요소를 '레코드' 페이지에 배치하세요.
Parent에 두 개의 Child 구성요소가 존재하는 것을 볼 수 있습니다.
Child 1 구성 요소 아래의 입력 텍스트에 일부 텍스트를 입력해 보겠습니다. Parent 구성 요소에 텍스트가 대문자로 표시되는 것을 볼 수 있습니다.
Child 2 구성 요소 아래의 입력 텍스트에 일부 텍스트를 제공합니다. Parent 구성 요소에 텍스트가 소문자로 표시되는 것을 볼 수 있습니다.
두 텍스트를 동시에 입력하는 것도 가능합니다.
PubSub 모델
서로 관련되지 않은 독립적인 구성 요소로 작업할 때 그리고 한 구성 요소에서 다른 구성 요소로 정보를 보내려는 경우 이 모델을 사용할 수 있습니다. PubSub는 발행(Publish)과 구독(Subscribe)을 의미합니다. 데이터를 보내는 구성 요소를 게시자라고 하며 데이터를 받는 구성 요소를 구독자라고 합니다. 구성요소 간에 이벤트를 전송하려면 pubsub 모듈을 사용해야 합니다. Salesforce에서 이미 사전 정의하여 제공합니다. 파일명은 pubsub입니다. LWC 구성요소를 생성하고 'pubsub.js'라는 자바스크립트 파일에 이 코드를 입력해야 합니다.
예:
게시와 구독이라는 두 가지 구성 요소를 만들어 보겠습니다.
게시에서는 사용자가 입력 텍스트를 생성할 수 있습니다. 버튼을 클릭하면 Subscribe 컴포넌트에서 데이터가 대문자와 소문자로 수신됩니다.
게시.js
이 코드를 JSON 파일에 포함하세요. 여기서 우리는 정보를 얻고 정보를 게시합니다.
정보 변수는 대문자이고 정보1은 소문자입니다. 코드 시작 부분에 import 문을 포함했는지 확인하세요. import pubsub from 'c/pubsub'.
정보정보2
// 대문자와 소문자로 정보를 가져옵니다.
정보 처리기 ( 이벤트 ) {
이것 . 정보 = 이벤트. 표적 . 값 ;
이것 . 정보2 = 이벤트. 표적 . 값 ;
}
// 정보를 모두 게시합니다(대문자와 소문자).
게시 처리기 ( ) {
pubsub. 출판하다 ( '게시' , 이것 . 정보 )
pubsub. 출판하다 ( '게시' , 이것 . 정보2 )
}
다음과 같아야 합니다:
게시.html
먼저 핸들러 정보가 포함된 텍스트를 받아들이는 라이트닝 입력을 생성합니다. 그런 다음 onclick 기능을 사용하여 하나의 버튼이 생성됩니다. 이러한 함수는 이전 'js' 코드 조각에 있습니다.
<템플릿><번개 카드 제목 = '텍스트 게시' >
<번개 입력 유형 = '텍스트' 온키업 = { 정보 처리기 } >< / 번개 입력>
<번개 버튼 클릭하면 = { 게시 처리기 } 상표 = '데이터 보내기' >< / 번개 버튼>
< / 번개카드>
< / 템플릿>
subscribe.js
이 코드를 JSON 파일에 포함하세요. 여기서는 먼저 callSubscriber() 메소드 내에서 정보를 대문자와 소문자로 별도로 변환하여 구독합니다. 그런 다음, linkedcallback() 메소드를 통해 이 메소드를 호출합니다. 코드 시작 부분에 import 문을 포함했는지 확인하세요. import pubsub from 'c/pubsub'.
정보정보2
// callSubscriber() 호출
연결된콜백 ( ) {
이것 . 전화구독자 ( )
}
// 대문자로 변환하여 정보를 구독합니다.
전화구독자 ( ) {
pubsub. 구독하다 ( '게시' , ( 정보 ) => {
이것 . 정보 = 정보. to대문자 ( ) ;
} ) ,
// 소문자로 변환하여 정보를 구독합니다.
pubsub. 구독하다 ( '게시' , ( 정보2 ) => {
이것 . 정보2 = 정보2. toLowerCase ( ) ;
} )
}
다음과 같아야 합니다.
subscribe.html
텍스트는 대문자(정보에 저장됨)와 소문자(정보2에 저장됨)로 표시됩니다.
<템플릿><번개 카드 제목 = '구독하다' >
< div 수업 = 'slds-p-around_medium' >
대문자로 수신된 정보 - < 비 > {정보} < / 비 >< br >
소문자로 수신된 정보 - < 비 > {정보2} < / 비 >
< / div >
< / 번개카드>
< / 템플릿>
산출:
이 두 가지 구성 요소를 페이지에 추가하십시오. 두 구성 요소가 동일한 페이지에 있는지 확인하십시오. 그렇지 않으면 기능이 작동하지 않습니다.
'Publish' 컴포넌트에 텍스트를 입력하고 'Send Data' 버튼을 클릭해 보겠습니다. 대문자와 소문자로 텍스트가 수신되는 것을 볼 수 있습니다.
결론
이제 Salesforce LWC의 이벤트 개념을 통해 LWC 구성 요소와 통신할 수 있습니다. 이 가이드의 일부로 우리는 부모가 자녀에게, 자녀가 부모에게 의사소통하는 방법을 배웠습니다. PubSub 모델은 구성 요소가 서로 관련되지 않은 경우(상위 – 하위 아님) 사용됩니다. 각 시나리오는 간단한 예를 통해 설명되며 이 가이드의 시작 부분에 제공된 코드를 'meta-xml' 파일에 포함했는지 확인하세요.