EP.5 LWC and AURA Coexistence

🪓 예제

Auar(Parent) - LWC(Child)

• Aura : myAuraComponent

  • Aura cmp

    <aura:component implements="flexipage:availableForAllPageTypes">
    	<lightning:card title="I'm Auraaa" iconName="custom:custom14"></lightning:card>
      	<!-- ========================== 예제 1 ========================== -->
        <!-- 
            Aura에서는 child 컴포넌트를 부를 때 대소문자 구분을 위해 하이픈('-')을 사용 할 필요 X 
            name = 자식 컴포넌트에서 @api를 통해 접근 할 파라미터
        -->
        <!-- <c:lwcHelloWorld aura:id="childLwc" name="Sammm"/>
        <lightning:button label="Click Me" title="Click Me"/> -->
      <!-- ========================== 예제 2 ========================== -->
      <c:getAccountList onaccountselect="{!c.handleAccountSelect}"></c:getAccountList>
    </aura:component>

  • controller.js

    // controller.js
    ({
      handleAccountSelect : function(component, event, helper) {
          // component.find("childLwc").callMe(); -- 예제1
          console.log('### Id in AURA : ' + event.getParam('accountId'));
          console.log('### Name in AURA : ' + event.getParam('accountName'));
      }
    })

• LWC : lwcHelloWorld

  • html

    <template>
        <lightning-card title="LWC Hello World" icon-name="custom:custom14">
            Hello, {name}
        </lightning-card>
    </template>

  • js

    import { LightningElement, api } from 'lwc';
    export default class LwcHelloWorld extends LightningElement {
      // name = "Seeeemy Lee";
      @api name;
      @api
      callMe() {
          console.log('#Hello World');
      }
    }

• LWC : getAccountList

  • html

    <template>
      <!-- With for each Loop -->
      <!-- <lightning-card title="Wire with for each" icon-name="utility:user">
          <div class="slds-var-m-arround_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>
                                  <hr/>
                              </lightning-layout-item>
                          </lightning-layout>
                      </a>
                  </template>
              </template>
          </div>
      </lightning-card>
      <br/> -->
      <!-- With iterator loop -->
      <lightning-card title="Wire with iterator" icon-name="utility:user">
          <div class="slds-var-m-arround_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}>
                                      <hr/>
                                  </div>
                              </lightning-layout-item>
                          </lightning-layout>
                      </a>
                  </template>
              </template>
          </div>
      </lightning-card>
    </template>

  • js

    import { LightningElement, wire } from 'lwc';
    import getAccList from "@salesforce/apex/AccountController.getAccList";
    
    export default class GetAccountList extends LightningElement {
        @wire(getAccList) accounts;
        handleSelect(event) {
            console.log('#### Id : ' + event.currentTarget.dataset.accountId);
            console.log('#### Name : ' + event.currentTarget.dataset.accountName);
    
            const selectEvent = new CustomEvent("accountselect", {
                detail : {
                    accountId : event.currentTarget.dataset.accountId, // ← data-name(query selector를 사용할 때 좋음)
                    accountName : event.currentTarget.dataset.accountName,
                }
            });
            this.dispatchEvent(selectEvent);
        }
    }

• Apex : AccountController

  • Apex Class

    public with sharing class AccountController {
  
      @AuraEnabled(cacheable=true) // ← lwc에서 호출하려면 Annotation 필수
      public static List<Account> getAccList(){
          List<Account> acc = [select id, name from Account];
          System.debug('# Account : ' + acc);
          return acc;
      }
  }