LWC Refresh Related List

LWC (Lightning Web Components)에서 페이지 전체를 새로고침하지 않고도 Related List를 업데이트하는 방법을 알아보겠습니다. 사용자 경험을 향상시키기 위해서는, DML 작업 후 화면을 자동으로 업데이트하는 기능이 중요합니다.

 

개요

 

DML 작업을 통해 데이터를 생성하거나 업데이트했음에도 불구하고, Salesforce 화면에 있는 Related List는 변화를 즉시 반영하지 않는 경우가 많습니다. 보통은 페이지를 새로고침하면 데이터가 정상적으로 표시되지만, 사용자가 매번 수동으로 새로고침을 해야 한다는 점은 큰 불편을 초래합니다.

1. 사용자 불편: 사용자가 매번 페이지를 수동으로 새로고침해야 하는 상황이 발생
2. 속도 문제: 페이지 새로고침 시 렌더링 속도가 느릴 수 있음
3. 경험 저하: 사용자 경험이 저하되어 불만이 발생할 가능성

 

RefreshEvent

Salesforce는 2023년 Spring 업데이트를 통해 RefreshEvent 기능을 도입했습니다. 이 기능을 사용하면 컴포넌트의 적절한 새로고침 타이밍을 제어하고, 외부 데이터와의 동기화를 쉽게 할 수 있도록 돕는 기능입니다. 이를 통해 DML 작업 후 즉시 Related List에 변화를 반영할 수 있습니다.

 

코드 예시

import { RefreshEvent } from 'lightning/refresh';

export default class MyComponent extends LightningElement {
  onRefresh() {
    this.dispatchEvent(new RefreshEvent());
  }
}

단순히 import를 해주고 dml 작업 이후 성공하였다면 this.dispatchEvent(new RefreshEvent()); 호출로 해결이 가능합니다.

 

사용 예시

RefreshEvent는 특히 데이터가 빈번히 업데이트되거나 실시간으로 반영되어야 하는 시나리오에서 유용합니다. 예를 들어, 지원 티켓 관리 시스템이나 영업 기회 관리 시스템에서 실시간 데이터를 필요로 하는 경우, 이 기능을 통해 사용자 인터페이스가 즉시 업데이트될 수 있습니다.

 

결과

 

RefreshEvent는 LWC에서 사용자 경험을 크게 개선할 수 있는 기능입니다. 이를 통해 사용자는 더 이상 페이지 전체를 새로고침하지 않고도 최신 데이터를 확인할 수 있으며, 성능 또한 대폭 향상될 수 있습니다.

 

 

 

출처

https://developer.salesforce.com/blogs/2023/01/lwc-enhancements-for-developers-learn-moar-spring-23

LWC Enhancements for Developers | Learn MOAR Spring ’23

https://salesforce.stackexchange.com/questions/251299/force-refresh-view-in-lwc#:~:text=You%20will%20need%20to%20import,Account%20Detail%20Page

Force refresh view in LWC