# 데이터 갱신

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

Canonical: https://grid.syidax.com/ko/docs/features/data-updates/

<a id="understand"></a>

## 동작 원리와 선택 기준

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

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

- [설치와 연결 · 공통 예제 데이터](https://grid.syidax.com/ko/docs/guides/getting-started.md)

<a id="example-1"></a>

## 예제 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 배열을 꺼내 전달해야 합니다.

<a id="example-2"></a>

## 예제 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로 계산되는 열이면 새 수량으로 다시 계산됩니다.

<a id="example-3"></a>

## 예제 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);
```

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

<a id="pitfalls"></a>

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

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

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

<a id="related-api"></a>

## 이 기능에 사용하는 API

- [rowData](https://grid.syidax.com/ko/docs/options/rowData.md) — 표에 공급할 원본 행 배열입니다. 전체 조회 결과를 교체할 때 새 배열을 전달하고, 일부 행만 바꿀 때는 applyTransaction을 사용합니다.
- [columnDefs](https://grid.syidax.com/ko/docs/options/columnDefs.md) — 열의 데이터 필드·제목·크기·표시·편집을 정의합니다. 열 그룹 정의를 함께 넣어 다단 머리글을 구성할 수 있습니다.
- [defaultColDef](https://grid.syidax.com/ko/docs/options/defaultColDef.md) — 모든 열에 공통으로 적용할 기본 설정입니다. 개별 columnDefs의 값으로 특정 열만 다르게 구성할 수 있습니다.
- [field](https://grid.syidax.com/ko/docs/columns/field.md) — 원본 행에서 값을 읽는 필수 필드 경로입니다. 표시 제목이 아니라 데이터의 키를 사용합니다.
- [colId](https://grid.syidax.com/ko/docs/columns/colId.md) — 열을 API·상태 저장에서 안정적으로 식별할 ID입니다. 제목 변경과 무관하게 유지하세요.
- [headerName](https://grid.syidax.com/ko/docs/columns/headerName.md) — 사용자에게 보여 줄 열 제목입니다. 원본 데이터 키와 다르게 작성할 수 있습니다.
- [applyTransaction](https://grid.syidax.com/ko/docs/methods/applyTransaction.md) — 안정적인 ID를 기준으로 원본 행을 추가·수정·삭제합니다. 결과를 확인하고 앱 서버 저장과 구분합니다.
- [rowDataChanged](https://grid.syidax.com/ko/docs/events/rowDataChanged.md) — 원본 행 데이터가 바뀌었을 때 발생합니다. 화면 정렬 순서 변경과는 다릅니다.
- [cellValueChanged](https://grid.syidax.com/ko/docs/events/cellValueChanged.md) — 셀의 실제 값이 바뀌었을 때 발생합니다. 행·필드·변경 전후 값으로 저장이나 활동 내역을 구성합니다.

<a id="next"></a>

## 함께 읽기

- [행·열·ID의 관계](https://grid.syidax.com/ko/docs/guides/concepts.md)
- [결과와 이벤트 연결](https://grid.syidax.com/ko/docs/guides/data-event-access.md)
- [Features에서 살펴보기](https://grid.syidax.com/grid/data-updates) — 직접 체험 가능한 범위는 해당 가이드에 안내되어 있습니다.