LWC(Lightning 웹 구성 요소)에는 구성 요소를 DOM에 삽입하고, 렌더링하고, DOM에서 구성 요소를 제거하는 자체 수명 주기가 있습니다. ConnectedCallback()(마운팅 단계)은 구성요소가 DOM에 삽입될 때 실행되는 LifeCycle 메서드 중 하나입니다. 이 가이드에서는 Connectioncallback()과 이 메서드를 포함하는 다양한 시나리오에 대해 예제와 함께 설명합니다.
- constructor()는 'Component' 인스턴스가 생성될 때 호출되는 Lifecycle 후크의 첫 번째 메서드입니다. 이 단계의 구성 요소 속성은 준비되지 않습니다. 호스트 요소에 액세스하려면 “this.template”을 사용해야 합니다. 이 단계의 하위 구성 요소는 존재하지 않으므로 하위 구성 요소에도 액세스할 수 없습니다. 이 방법에서는 Super()가 사용됩니다.
- linkedcallback()은 요소가 DOM에 삽입될 때 호출되는 두 번째 메서드(2단계)입니다. 이 경우 후크는 상위에서 하위로 흐릅니다. 이 단계의 구성 요소 속성은 준비되지 않습니다. 호스트 요소에 액세스하려면 “this.template”을 사용해야 합니다. 이 단계의 하위 구성 요소는 존재하지 않으므로 하위 구성 요소에도 액세스할 수 없습니다.
- 세우다 (): 확장 단계가 렌더링 중입니다. 상위 구성 요소가 렌더링된 다음 하위 구성 요소가 있는 경우 렌더링됩니다. 상위 요소를 렌더링한 후 하위 구성 요소(생성자, 연결된 콜백, 렌더링)로 이동하여 상위 요소와 동일한 단계를 따릅니다.
- 렌더링된 콜백 (): 컴포넌트 렌더링이 완료되고 이후에 작업을 수행하려는 경우 이 메서드가 호출됩니다.
- 연결이 끊어진콜백 (): 이 단계에서는 요소가 DOM에서 제거됩니다(connectedcallback()의 반대).
- LifeCycle에서 오류가 발생하면 errorCallback()이 호출됩니다.
연결된콜백() 구조
연결된콜백() 사용:
- 변수를 정의하고 속성 값을 설정합니다.
- 그 안에 있는 Apex를 호출하세요.
- 이벤트를 생성하고 전달합니다.
- UI API를 호출할 수 있습니다.
- 그 안에 내비게이션 서비스가 있습니다.
이는 다음과 같이 JavaScript 파일에 지정되어야 합니다.
연결된콜백 ( ) {
// 하다…
}
모든 예제에서는 이 'meta.xml' 파일을 활용합니다. 각 예에서는 이를 지정하지 않습니다. LWC 구성 요소는 레코드 페이지, 앱 페이지 및 홈 페이지에 추가될 수 있습니다.
버전 = '1.0' ?>
<노출됨> 진실 < / 노출되어 있다>
<대상>
<대상> 번개__레코드 페이지 < / 대상>
<대상> 번개__앱페이지 < / 대상>
<대상> 번개__홈페이지 < / 대상>
< / 대상>
< / LightningComponentBundle>
예시 1:
구성 요소가 UI에 로드될 때 constructor() 및 linkedcallback() 단계를 시연합니다.
연결된CallBack.html
<템플릿><번개 카드 제목 = '연결된 콜백' >
< / 번개카드>
< / 템플릿>
연결된CallBack.js
// 마운트 단계 - constructor()건설자 ( ) {
감독자 ( )
콘솔. 통나무 ( '생성자 호출' )
}
// 마운트 단계 -connectedCallback()
연결된콜백 ( ) {
콘솔. 통나무 ( 'connectedCallback이 호출되었습니다.' )
}
다음과 같습니다.
산출:
이 구성 요소를 개체의 '기록' 페이지에 추가합니다.
페이지를 검사합니다(왼쪽을 클릭하고 “검사” 선택). 그런 다음 '콘솔'탭으로 이동하십시오.
예 2:
이 예에서는 트랙 데코레이터를 사용하여 과일을 만들고 linkedcallback() 메서드 내에서 속성 값을 'Mango'로 설정합니다. 이는 UI에 표시됩니다.
firstExample.html
<템플릿><번개 카드 제목 = '속성 설정' >
< div 수업 = 'slds-var-m-around_medium' >
< 비 > 과일 이름: < / 비 > {과일}
< / div >
< / 번개카드>
< / 템플릿>
firstExample.js
수입 { 번개요소 , 길 } ~에서 '운' ;내보내다 기본 수업 첫 번째예 연장하다 번개요소 {
@ 과일 추적 ;
연결된콜백 ( ) {
// 속성 값을 Mango로 설정
이것 . 과일 = '망고' ;
}
}
산출:
이 구성 요소를 개체의 '기록' 페이지에 추가합니다. 여기서는 “계정 레코드” 페이지에 추가합니다. 그 과일이 '망고'임을 알 수 있습니다.
예시 3:
이전 코드를 활용하고 'js' 및 'html' 파일의 일부 명령문을 수정합니다.
'js' 파일에 'number'와 500인 새 변수를 만듭니다. 숫자가 500보다 크면 과일을 '500보다 큼'으로 설정합니다. 그렇지 않으면 과일을 '500과 같음'으로 설정합니다.
firstExample.html
<템플릿><번개 카드 제목 = '속성 설정' >
< div 수업 = 'slds-var-m-around_medium' >
< 비 > 비용: < / 비 > {과일}
< / div >
< / 번개카드>
< / 템플릿>
firstExample.js
@ 과일 추적 ;연결된콜백 ( ) {
숫자를 보자 = 500 ;
만약에 ( 숫자 > 500 ) {
이것 . 과일 = '500보다 큼' ;
}
또 다른 {
이것 . 과일 = '500과 같다' ;
}
}
산출:
숫자는 500입니다. 따라서 과일은 결과를 '500과 동일'로 유지합니다.
예시 4:
이 시나리오에서는 linkedcallback() 메서드를 사용하여 계정 레코드(Account 개체)를 반환합니다.
- 먼저 Id, Name, Industry 및 Rating 필드가 포함된 처음 10개 계정 목록을 반환하는 Apex 클래스를 작성합니다.
- 다음으로 계정을 추적하고 Apex 클래스에서 메서드를 호출하여 linkedcallback() 메서드에 반환합니다.
- HTML 파일에서는 계정을 반복하고 이름과 산업을 반환하는 각 지시문에 이를 사용합니다.
AccountData.apxc
공유 클래스 AccountData를 사용하는 공개 {@AuraEnabled(캐시 가능=true)
공개 정적 List<계정> returnAcc(){
List
accountList 반환;
}
}
두 번째Example.html
<템플릿><번개 카드 제목 = '계정 목록 표시' >
< div 수업 = 'slds-var-m-around_medium' >
<템플릿 if:true = { 계정 } >
<템플릿 ~을 위한 :각 = { 계정 } ~을 위한 :안건 = 'account_rec' >
< 피 열쇠 = { account_rec. ID } >< 비 > 계정: < / 비 > {account_rec.이름} < 비 > 산업: < / 비 > {account_rec.산업} < / 피 >
< / 템플릿>
< / 템플릿>
< / div >
< / 번개카드>
< / 템플릿>
secondExample.js
Apex에서 returnAcc 가져오기 수업 :수입 에서 반환Acc '@salesforce/apex/AccountData.returnAcc' ;
쓰다 이것 'js' 내의 코드 수업 :
@ 계정 추적 ;
@ 추적 오류 ;
연결된콜백 ( ) {
returnAcc ( )
// 계정을 반환합니다.
. 그 다음에 ( 결과 => {
이것 . 계정 = 결과 ;
이것 . 오류 = 한정되지 않은 ;
} )
. 잡다 ( 오류 => {
이것 . 오류 = 오류 ;
이것 . 계정 = 한정되지 않은 ;
} ) ;
}
산출:
처음 10개의 계정 레코드가 계정 이름 및 업종과 함께 반환됩니다.
결론
이제 LWC에서 Apex 데이터로 작업하는 동안 대부분의 경우에 linkedcallback() 메서드를 사용할 수 있습니다. 이 가이드에서는 linkedcallback()을 사용하여 속성 값을 설정하는 방법에 대해 논의하고 여기에 Apex를 포함시켰습니다. 더 나은 이해를 위해 먼저 constructor() 및 linkedcallback() 메서드를 보여주는 예제를 제공했습니다. 웹페이지를 검사하고 콘솔에서 확인해야 합니다.