LWC에서 Apex 메소드 사용하기

 

 

 

LWC에서 Apex 메소드 사용하기

LWC에서 사용되는 Apex 메소드는 static, public, global이어야 하며, 메소드 정의 전에 @AuraEnabled  주석을 달아야 한다.

 

 

@AuraEnabled(cacheable=true)

프레임워크에서 데이터를 캐시 할 수 있도록 하면 반복적인 서버 호출이 제거되어 향후 읽기 작업이 더 빠르게 실행됨.

@AuraEnabled 주석에서 cacheable=true로 설정하여 메소드를 캐시 기능으로 표시.

@AuraEnabled 메소드가 cacheable=true인 경우 DML 작업은 허용되지 않음.

 

예시) BingoController.cls

public with sharing class BingoController {
    @AuraEnabled(cacheable=true)
    public static List<Bingo> getCheckedBingo(Id bingoId) {
        return [
            SELECT Name, Subject, Number
            FROM Bingo
            WHERE bingoId = :bingoId
            WITH SECURITY_ENFORCED         
        ]
    }
}

 

 

 

@wire

Apex 메소드를 연결하려면 메소드가 cacheable이어야 함.

cacheable Apex 메소드를 연결하려면 @wire decorator 사용

 

이 방법으로 Apex를 호출하면 LWC 엔진에 대한 제어가 위임되고 반응형 서비스가 생성됨

Apex 메소드로 전달된 파라미터의 값이 변경될 때마다 Apex 메소드는 decorate 된 property 또는 function에 새 값을 제공

wired 메소드는 cacheable이어야 하므로 데이터는 LDS cache 또는 서버에서 가져올 수 있음

Apex 메소드로 캐시 된 메소드를 새로 고치려면 refreshApex 함수 호출

 

Note

Lightning Data Service는 Apex 메소드에 의해 캐시 된 데이터를 인식하지 못함

LDS function이 레코드를 업데이트할 때 해당 업데이트는 Apex 메소드에 의해 캐시 된 데이터에 영향을 미치지 않음

 

예시) wireApexProperty.js

import { LightningElement, api, wire } from 'lwc';
import getCheckedBingo from '@salesforce/apex/BingoController.getCheckedBingo';
export default class WireApexProperty extends LightningElement {
    //FlexiPage가 현재 레코드의  ID를 컴포넌트에 전달하도록 @api recordId property를 정의
    @api recordId;
    
    //wire decorator는 2개의 파라미터를 받음(getCheckedBingo, accountId)
    @wire (getCheckedBingo, { bingoId: '$recordId' })
    bingos;
}

Apex 메소드는 bingos 프로퍼티에 데이터를 전달하고 해당 데이터를 LDS 캐시에 저장.

$recordId는 반응적이기 때문에 값이 변경될 때마다 Apex 메소드는 캐시/서버에 새 데이터를 전달.

 

 

 

Apex 호출 명령하기

@wire를 사용하는 대신 Apex 다르게 호출하기

 

읽기 작업의 호출을 제어해야 하는 경우, 레코드를 수정해야 하는 경우 Apex 호출 명령

Apex를 호출하려면 LWC 엔진에 제어를 위임하는 대신 컴포넌트의 JS 파일에서 Apex를 한 번 호출

그 대신 JS promise를 받을 수 있음 (LDS function을 명령적으로 호출할 때와 같다)

 

cacheable, non-cacheable 메소드를 모두 명령적으로 호출 O

cacheable 메소드의 캐시를 새로 고치려면 메소드 다시 호출

 

예시) callApexInperative.js

.html 파일에서 lightning-button을 클릭하면, handlebuttonClick은 getCheckedBingo Apex 메소드를 호출 명령

import { LightningElement, api, wire } from 'lwc';
import getCheckedBingo from '@salesforce/apex/BingoController.getCheckedBingo';
export default class CallApeximperative extends LightningElement {
    @api recordId;
    handleButtonClick() {
        getCheckedBingo({ //imperative Apex call. promise 반환
            bingoId: this.recordid
        })
            .then(bingos => {
            	//bingo 레코드가 정상적으로 리턴되면 실행할 코드 작성
            })
            .catch(error => {
            	//bingo 레코드가 정상적으로 리턴되지 않으면 실행할 코드 작성
            });
    }
}

handleButtonClick 메소드가 프레임워크에서 호출되면 getCheckedBingo Apex 메소드를 호출하여 메소드가 올바른 Bingo에 관련된 데이터를 얻기 위해 필요한 bingoId를 전달.

Apex method call이 성공하면 promise 이행되고 메소드 실행

실패하면 promise 거부되고 catch 메소드 실행

 

 

 

Use Case

 

Use Case	추천하는 Solution	Notes
레이아웃 또는 필드 리스트를 지정하는 레코드    view / edit	lightning-record-form
레코드 데이터의 커스텀 렌더링 또는    커스텀 레이아웃 form을 사용하여 레코드 view	lightning-record-view-form
커스텀 form 레이아웃, 레코드 데이터의    커스텀 렌더링, 또는 미리 채워진 필드 값을    사용하여 레코드 edit	lightning-record-edit-form
하나의 레코드에 대한 데이터 또는 메타데이터 read	LDS wire adapters	결합될 수 있지만 독립된 트랜잭션에서    작업이 실행됨
하나의 레코드를 create/edit/delete	LDS functions	결합될 수 있지만 독립된 트랜잭션에서    작업이 실행됨
여러 레코드 read	@wire를 사용해 Apex 호출	cacheable=true를 사용하여    Apex 메소드 annotate
한번에 호출된 여러 레코드 read 또는    여러 레코드 modify	Apex 호출 명령	read 위해 cacheable=true를 사용하여    Apex 메소드 annotate

 

 

 

 

 

 

 

 

 

 

※ 출처 : Trilhead - Use Apex to Work with Data

Lightning Web Components and Salesforce Data