EP.6 Wire Adapters & Functions

🔗 Wire Adapter
참고(Salesforce Developer)

🪓 예제

---

→ 좌측 빈 부분에 컴포넌트가 삽입되어있음. js에서 @wire를 사용해서 화면에 들어가자마자 function이 실행됨.

1) wireWithProperty

• html

<template>
    <P>
        <b>Account Name : {name} </b>
    </P>
</template>

• js

import { LightningElement, api, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';

export default class WireWithProperty extends LightningElement {
    @api recordId; // 현재 보고 있는 레코드 페이지의 레코드 ID를 가져올 때 사용(Parent-Child 관계에서 api는 Child에서 사용 해야함)
    @wire(getRecord, {recordId : '$recordId', fields : [ACCOUNT_NAME_FIELD]})
    record;
    get name() {
        return getFieldValue(this.record.data, ACCOUNT_NAME_FIELD);
    }
     
}

2) wireWithFunciton : function을 사용해서 에러에 대한 제어 및 데이터를 갖고 온 후 수행할 로직을 추가할 수 있음

• html x
• js

import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';

export default class WireWithFunction extends LightningElement {
    @api recordId;
    accounts; // @wire로 가져온 데이터를 저장
    error; // error 저장

    @wire(getRecord, { recordId : '$recordId', fields : ['Account.Name']})
    wireAccount({ error, data }) {
        if(data) {
            console.log('### Getting data from wire with function');
            this.accounts = data;
        } else if(error) {
            this.error = error;
            console.log('### error : ' + error.body.message);
        }
    }
}