Salesforce LWC에서 비동기 작업을 동기처럼 처리하는 방법

오늘은 Salesforce LWC (Lightning Web Component)에서 비동기 작업을 동기처럼 처리하는 방법을 정리해보려합니다.
아직 많이 해본 작업은 아니지만 자주 사용할 작업이라 생각되어서, 지금 정리해두고 앞으로도 더 공부해볼 생각입니다.
Salesforce 공식 문서를 참고하였습니다.

 

비동기 작업이란?

비동기 작업이란 특정 작업이 완료될 때까지 기다리지 않고, 다음 코드를 바로 실행하는 방식입니다. 예를 들어, 서버에서 데이터를 가져오는 작업은 시간이 걸리기 때문에 기다리는 동안 다른 작업을 먼저 진행하고, 데이터가 준비되면 결과를 받아옵니다.

 

비동기 작업을 동기처럼 처리해야 하는 이유

LWC에서는 서버에서 데이터를 가져오거나 외부 작업을 비동기적으로 처리하는 경우가 많습니다. 하지만 순차적으로 진행해야 하는 작업이 있을 때는 비동기 작업을 동기처럼 처리하는 것이 필요합니다. 예를 들어, 특정 데이터를 먼저 로드하고, 그 데이터를 기반으로 추가 작업을 해야 하는 경우가 있습니다. 이런 경우에는 각 작업이 완료된 순서대로 진행되도록 하는 것이 중요합니다.

 

async와 await로 비동기 작업을 동기처럼 처리하기

async와 await를 사용하면 이러한 순차 처리를 쉽게 구현할 수 있습니다.

• async 함수: async 키워드를 함수 앞에 붙이면 해당 함수는 항상 Promise를 반환합니다. 함수 내부에서 await를 사용할 수 있습니다.
• await 키워드: await는 Promise가 완료될 때까지 기다렸다가 그 결과를 반환합니다. await는 async 함수 안에서만 사용할 수 있습니다.

이제 예제를 통해 async와 await가 어떻게 동작하는지 살펴보겠습니다.

 

예제: 순차적으로 데이터를 가져오는 LWC 코드

1. Apex 메서드 호출: Salesforce에서 데이터를 가져오기 위해서는 Apex 메서드를 호출해야 합니다. 이 작업은 비동기이기 때문에 async와 await를 사용할 수 있습니다.
2. 순차적 처리: 첫 번째 데이터를 가져온 후, 이를 바탕으로 추가 작업을 해야 하는 경우가 있을 때 await를 사용하여 순서대로 작업을 진행합니다.

코드 예시

import { LightningElement } from 'lwc';
import getInitialData from '@salesforce/apex/MyController.getInitialData';
import getAdditionalData from '@salesforce/apex/MyController.getAdditionalData';

export default class SequentialDataLoader extends LightningElement {
    initialData;
    additionalData;
    isLoading = true;

    // 순차적으로 데이터 로드 함수
    async loadData() {
        try {
            this.isLoading = true;

            // 첫 번째 데이터를 가져오고, 완료될 때까지 기다림
            this.initialData = await getInitialData();

            // 첫 번째 데이터를 기반으로 추가 데이터 가져오기
            this.additionalData = await getAdditionalData({ initialData: this.initialData });

            this.isLoading = false; // 모든 작업 완료 후 로딩 종료
        } catch (error) {
            console.error("데이터 로드 오류:", error);
            this.isLoading = false;
        }
    }

    // 컴포넌트가 처음 로드될 때 데이터 가져오기
    connectedCallback() {
        this.loadData();
    }
}

 

코드 설명

1. 비동기 함수 설정: loadData 함수는 async로 선언되어 있어 함수 내에서 await를 사용할 수 있습니다.
2. 순차적 데이터 로드: 첫 번째 데이터가 로드될 때까지 await로 기다린 후, 그 데이터를 기반으로 추가 데이터를 가져옵니다. 이렇게 하면 작업이 순차적으로 진행됩니다.
3. 로딩 상태 표시: isLoading 변수를 통해 데이터를 가져오는 동안 로딩 상태를 표시하고, 모든 작업이 완료되면 로딩을 종료합니다.

 

화면에 로딩 상태 표시하기

HTML에서 if:true와 if:false 디렉티브를 사용해 데이터를 가져오는 동안 로딩 메시지를 표시하고, 데이터가 준비되면 실제 데이터를 화면에 표시할 수 있습니다.

<template>
    <template if:true={isLoading}>
        <p>Loading data...</p>
    </template>
    <template if:false={isLoading}>
        <p>Initial Data: {initialData}</p>
        <p>Additional Data: {additionalData}</p>
    </template>
</template>

 

마무리

이제 async와 await를 활용해 비동기 작업을 동기적으로 처리하는 방법을 잘 알아두었다가 순차적으로 처리해야 하는 작업이 있을 때 활용해야겠습니다.

---

참고 자료

1. Lightning Web Components 개발자 가이드 - LWC에서 Apex 호출하기
2. JavaScript의 async/await 사용법 - Salesforce에서 비동기 작업의 개념과 사용법
3. LWC 조건부 렌더링 공식 문서 - LWC에서 조건부 렌더링으로 로딩 상태 표시하기