syidaxgrid
홈 가격 내 정보

GRID FEATURE

데이터 갱신

조회 결과 전체를 새로 받았다면 rowData를 교체합니다. 일부 주문만 바뀌었다면 applyTransaction에 add·update·remove를 전달합니다. 갱신은 화면 위치가 아니라 getRowId로 연결됩니다.

Markdown 원문 Features

동작 원리와 선택 기준

트랜잭션의 반환값은 실제 적용 결과입니다. 요청한 값만 보고 성공이라고 처리하지 말고 updated·rejected 등의 결과를 확인하세요. 브라우저 변경이 서버 저장을 의미하지는 않습니다.

코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.

예제 1. 조회 결과 전체 교체

다른 기간의 주문을 조회한 결과로 목록을 바꾸는 상황입니다. 앱의 조회 API가 응답한 배열을 한 번에 전달합니다.

javascript
const response = await fetch('/api/orders?month=2026-10');
if (!response.ok) throw new Error('조회 실패');
const rows = await response.json();
grid.rowData = rows;

결과 확인: 이번 조회 결과만 표시됩니다. /api/orders는 앱에서 준비할 예시 API이며 서버 응답이 객체라면 실제 rows 배열을 꺼내 전달해야 합니다.

예제 2. 한 주문의 수량 증가

첫 주문 수량 10을 20으로 바꿉니다. 나머지 필드도 포함한 새 행 객체를 전달합니다.

javascript
const row = grid.rowData.find(row => row.id === 'ORD-0001');
if (row) {
  const result = await grid.applyTransaction({ update: [{ ...row, quantity: row.quantity + 10 }] });
  console.log(result.updated, result.rejected);
}

결과 확인: 동일 ID 주문의 수량이 10 증가합니다. 합계가 valueGetter로 계산되는 열이면 새 수량으로 다시 계산됩니다.

예제 3. 추가·삭제를 하나의 변경으로 처리

취소된 주문을 제거하면서 새 주문을 넣는 경우입니다. 제거 대상은 현재 데이터에서 찾아 전달합니다.

javascript
const cancelled = grid.rowData.find(row => row.id === 'ORD-0002');
const result = await grid.applyTransaction({
  add: [{ id: 'ORD-0004', product: 'Delta', quantity: 5, price: 100 }],
  remove: cancelled ? [cancelled] : []
});
console.log(result.added, result.removed, result.rejected);

결과 확인: 추가와 삭제가 같은 반환 보고서에 포함됩니다. 고빈도 수신 데이터도 일정 간격으로 모아 전달하면 호출 수를 줄일 수 있습니다.

조합할 때와 문제를 해결할 때

갱신 객체에서 누락한 필드가 어떻게 처리되는지 가정하지 말고 기존 행을 펼쳐 새 값만 덮어쓰세요. 조회 중 도착한 오래된 응답이 최신 편집을 덮어쓰지 않도록 요청 순서를 관리합니다.

대량 변경에서는 매 행마다 전체 rowData를 다시 할당하기보다 변경분을 모으세요. 서버 행 모델은 자체 트랜잭션 API를 사용하므로 클라이언트 트랜잭션과 구분합니다.

함께 읽기