[Salesforce] Lwc 간의 데이터 전달법

Aura <-> visualforce에 이어서 LWC <-> LWC 간의 데이터 전달법이다. Aura <-> Aura와 굉장히 유사한 부분이 많지만 헤깔리는 부분도 있다.. 처음 사용할때 문서를 얼마나 뒤졌는지 모르겠다 ㅠ

 

부모격 LWC 에서 자식격 LWC 로 데이터 전송

ParentPage.html 

<div if:true={isOpen}>
    <c-child-Page
        product-name = {productName}   //전송하는 파라미터
        is-modal-open = {isOpen}	   //전송하는 파라미터
        onchild={doHandleChild}		   //자식 LWC에서 다시 값 보내줄 때 받을 function
        onclose={doHandlechildClose}>  //자식 LWC에서 다시 값 보내줄 때 받을 function
    </c-child-Page>
</div>

lwc는  CAMEL 표기법이 된 부분마다 '-'를 사용해서 표시해야한다. 여간 불편한게 아니다.... 전송할 값도 마찬가지임!

 

ParanPage.js

@track isOpen = false;
@track productName = '';


sendDataToChild(){
	this.isOpen = true;
    this.productName = 'test';
}

 

 

ChildPage.js

@api isOpen;
@api productName;

ChildPage에서 값을 받을때는 @api로 선언해주면 값이 알아서 착착들어간다!

 

---

자식격 LWC에서 부모격 LWC로 데이터 전송

ChildPage.js

    doCloseModal(){
        this.isOpen = false;
        const eventInfo = new CustomEvent('close', {
            detail: 'false'
        });
        this.dispatchEvent(eventInfo);
    }
    
    doHandleClickProduct(event){
        var data = this.productList[event.target.dataset.item];
        const eventInfo = new CustomEvent('child', {
            detail: {data}
        });
        this.dispatchEvent(eventInfo);
}

Aura와 마찬가지로 Event를 걸어주면 된다. 앞서 ParentPage.html에 적은 on~~다음 부분을 해당 new CustomEvent( 다음에 적어주면 된다. 

 

ParentPage.js

doHandleChild(event){
        var result = event.detail.data; //ChildPage에서 넘어온 값
        /*do something!*/
    }

    doHandlechildClose(event){
        /*do something!*/
    }

ParentPage에서 이제 돌아온 값을 처리해주면 된다!