📙일지_230722(EP.5)

LWC and AURA Coexistence

💡 AURA Coexistence

🐸 Decoration

● @api: LWC 구성 요소의 공용 속성 또는 메서드를 노출하는 데 사용.
● @wire: LWC 구성 요소의 속성 또는 메서드를 데이터 소스에 연결하는 데 사용.
● @track: LWC 구성 요소의 속성에 대한 변경 사항을 추적하는 데 사용.
   

🎃 Decoration 참고

---

myAuraComponent

🧶myAuraComponent.html

<<aura:component implements="flexipage:availableForAllPageTypes">
    <lightning:card title="Aura Hello World" iconName="custom:custom14"></lightning:card>
    <c:lwcHelloWorld aura:id="childLwc" name="Kapil"/>
    <lightning:button label="Neutral" value="Test Button" onclick="{!c.myAction}"></lightning:button>
</aura:component>

🧶myAuraComponentController.js

({
    myAction: function(component, event, helper) {
       component.find("childLwc").callMe();
    }
})

---

lwcHelloWorld

🎡lwcHelloWorld.html

<<template>
    <lightning-card title="LWC Hello World" icon-name="custom:custom4">
        <div class="slds-card_body">
            Hello, {name}
        </div>
    </lightning-card>
</template>

🎡lwcHelloWorld.js

import { LightningElement, api } from 'lwc';

export default class LwcHelloWorld extends LightningElement {
  @api name;
  @api 
  callMe(){
    console.log("###Hello World");
  }

}

---

🐸 CuntomEvent

1. Event() 생성자
2. CustomEvent() 생성자
🎈const customEvent = new CustomEvent(type, options);

type : 이벤트의 이름
options : 프로퍼티를 포함하는 객체, 생략 가능

● detail : 세부정보를 나타내는 값, 기본값은 null
● bubbles : 이벤트가 상위요소로 전달되어야 하는지에 대한 여부 결정 가능.
● cancelable : 이벤트를 취소할 수 있는지에 대한 여부 설정
● composed : Shadow DOM 에서 실제 DOM 으로 전파되어야 하는지에 대한 여부 가능.
🎇(하위 세개의 값은 불리언 값으로 설정가능, 기본값은 false)      

🎃 CustomEvent() 참고

---

AccountController

🔔AccountController

 public with sharing class AccountController {

    @AuraEnabled(cacheable=true)
    public static List<Account> getAccList(){
        List<Account> acc = [select Id , Name from Account];
        return acc;
    }
}

---

myAuraComponent

🔔myAuraComponent.html

<<aura:component implements="flexipage:availableForAllPageTypes">
   <lightning:card title="Aura Hello World" iconName="custom:custom14"></lightning:card>
   <c:lwcHelloWorld aura:id="childLwc" name="Kapil"/>
   <lightning:button label="Neutral" value="Test Button" onclick="{!c.myAction}"></lightning:button>
</aura:component>

🔔myAuraComponent.js

({
   handleAccountSelect : function(component, event, helper) {
       console.log('###Id om AURA:' + event.getParam('accountId'));
       console.log('###Name om AURA:' + event.getParam('accountName'));
   }
})

---

getAccountList

✨getAccountList.html

    <template>
    <!-- <lightning-card title="Wire with for each" icon-name="utility:user">
        <div class="slds-var-m-around_medium">
            <template if:true={accounts.data}>
                <template for:each={accounts.data} for:item="account">
                    <a href="#" key={account.Id} onclick={handleSelect}>
                        <lightning-layout>
                            <lightning-layout-item padding="horizontal-small">
                                <p>{account.Name}</p>
                                <br/>
                            </lightning-layout-item>
                        </lightning-layout>
                    </a>
                </template>
            </template>
        </div>
    </lightning-card> -->
    <br/>

    <lightning-card class="Wire with iterator" title="Wire with iterator" icon-name="utility:user">
        <div class="slds-var-m-around_medium">
            <template if:true={accounts.data}>
                <template iterator:it={accounts.data}>
                    <a href="#" key={it.value.Id} onclick={handleSelect} data-account-id={it.value.Id}
                    data-account-name={it.value.Name}>
                        <lightning-layout>
                            <lightning-layout-item padding="horizontal-small">
                                <div if:true={it.first}>
                                    <div style="border: 5px solid black;"></div>
                                </div>
                                <p>{it.value.Name}</p>
                                <div if:false={it.last}></div>
                                <hr/>
                            </lightning-layout-item>
                        </lightning-layout>
                    </a>
                </template>
            </template>
        </div>
    </lightning-card>
    </template>

✨getAccountList.js

({
   handleAccountSelect : function(component, event, helper) {
       console.log('###Id om AURA:' + event.getParam('accountId'));
       console.log('###Name om AURA:' + event.getParam('accountName'));
   }
})