lwc 확인 모달 2가지 스타일 ( lwc confirmation modal 2 styles )

 

 

1. LightningConfirm

• import LightningConfirm form 'lightning/confirm';
• LightningConfirm.open({메시지, 변수, 라벨, 테마 등})

 

 import LightningConfirm from 'lightning/confirm';

export default class RestApi_OrderProcess extends LightningElement {

 

    async sendOrder(){

        const confirmation = await LightningConfirm.open({

            message: '정말 주문하시겠습니까?',

            variant: 'header',  //headerless

            label: '주문 확인',

            theme: 'alt-inverse'

        });  

        if(confirmation){

             //확인 창에서 확인 눌렀을 시 로직

        } else {

              return;

        }

       

    }

}

 

---

---

1-1 : async와 await

• JavaScript의 async 및 await 키워드는 비동기 작업을 다룰 때 사용

 

async

• 함수 선언 앞에 async 키워드를 붙이면 해당 함수는 항상 Promise를 반환한다.
• 이 Promise는 함수의 실행이 완료되면 결정된다.
• async 함수 내에서는 await 키워드를 사용하여 비동기 작업을 수행할 수 있다.

await

• await 키워드는 async 함수 내에서만 사용할 수 있다.
• 이 키워드는 Promise가 처리(resolve)될 때까지 대기하고, 그 값을 반환한다.
• 이로써 비동기 작업이 완료될 때까지 코드의 실행이 멈추고, 작업이 완료되면 해당 작업의 결과를 반환한다.

 

---

 

 

2. window.confirm(메시지);

• window.confirm();

   

  sendOrder(){

        const confirmation = window.confirm('정말 주문하시겠습니까?');

     

       if(confirmation){

             //확인 창에서 확인 눌렀을 시 로직

        } else {

              return;

        }

    }

 

 

---