데이터와 이벤트.
CustomEvent.detail과 비동기 API로 Grid의 실제 결과를 애플리케이션에 연결하세요.
빠르게 이해하기
사용자가 수량을 바꾸거나 주문을 선택했을 때 앱도 그 결과를 알아야 합니다. Grid가 보내는 이벤트를 받아 저장 버튼이나 상세 패널과 연결할 수 있습니다.
앱에서 연결하는 순서
- 화면에서 결과 먼저 보기
Grid 작업 화면에서 수량을 편집하고 코드 보기 바로 위의 최근 결과를 확인하세요. 변경 전후 값이 어디에 들어 있는지 살펴봅니다.
- 이벤트 구독하기
앱에서 cellValueChanged를 구독하고 event.detail의 rowId, field, oldValue, newValue를 읽으세요. 이벤트 이름의 대소문자를 맞춰야 합니다.
- 업무 처리와 정리 연결
받은 값으로 서버 저장 등 필요한 작업을 구현하세요. 화면을 닫을 때 이벤트 구독을 해제하고 저장 실패도 사용자에게 알려 줍니다.
Grid에서 일어난 실제 작업 결과를 앱의 로직으로 전달할 수 있습니다.
API 메서드는 비동기 결과를 반환하므로 await로 읽습니다. stateUpdated는 전체 저장 상태가 아니라 변경 알림이며 전체 상태는 getState()로 읽으세요.
알아두면 쉬운 용어
- event.detail
- 이벤트가 전달하는 실제 결과 값입니다.
- Promise / await
- 비동기 작업의 결과 / 그 결과가 준비될 때까지 기다려 읽는 문법입니다.
이벤트 결과
#이벤트 이름은 대소문자를 구분합니다. event.detail에는 실제 작업 결과가 들어 있습니다. 예를 들어 cellValueChanged는 행 ID·열·이전 값·변경 값·변경 원인을 제공합니다.
grid.addEventListener('cellValueChanged', event => {
const { rowId, field, oldValue, newValue, source } = event.detail;
console.log({ rowId, field, oldValue, newValue, source });
});
grid.addEventListener('selectionChanged', event => {
console.log(event.detail);
});작업 화면의 최근 결과에서 마지막 작업 1건의 JSON을 확인할 수 있습니다. 코드 보기 바로 위에 표시되며 JSON 복사 버튼으로 전체 값을 가져올 수 있습니다.
API 호출
#Web Component 메서드는 Promise를 반환합니다. 반환값을 확인하려면 await를 사용하세요. getApi()는 Grid와 연결된 API를 반환하며, 속성·메서드·이벤트의 타입은 공통 API reference에서 확인할 수 있습니다.
await customElements.whenDefined('sy-grid');
const api = await grid.getApi();
console.log(api);
const state = await grid.getState();
console.log(state);연결과 정리
#화면을 해제할 때 이벤트 구독과 외부 연결을 정리하세요. 서버 저장은 앱에서 실패·재시도·동시 편집 정책과 함께 구현합니다. Grid의 편집 이벤트 자체가 서버 저장을 의미하지는 않습니다.
const controller = new AbortController();
grid.addEventListener('stateUpdated', async event => {
console.log(event.detail); // 변경된 영역에 대한 알림
const state = await grid.getState();
if (controller.signal.aborted) return;
console.log(state); // 실제 전체 상태
}, { signal: controller.signal });
// 화면을 해제할 때
// controller.abort();