# 데이터와 이벤트

Grid API는 현재 상태를 읽거나 변경하는 호출이고, 이벤트는 사용자가 조작하거나 데이터가 바뀐 결과를 알리는 통로입니다. 둘을 연결하면 앱의 저장 버튼·상세 패널·변경 내역을 구성할 수 있습니다.

Canonical: https://grid.syidax.com/ko/docs/guides/data-event-access/

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

## 동작 원리와 선택 기준

대부분의 공개 메서드는 Promise를 반환하므로 await로 완료 결과를 읽습니다. 이벤트 이름은 대소문자를 구분하고 결과 payload는 CustomEvent.detail에 담깁니다.

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

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

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

## 예제 1. 수정 결과 읽기

편집 전후 값과 대상 셀은 이벤트의 실제 타입을 확인합니다.

```javascript
const controller = new AbortController();
grid.addEventListener('cellValueChanged', event => {
  console.log(event.detail);
}, { signal: controller.signal });
```

결과 확인: 몇 번째 이벤트인지 세는 대신 실제 변경 결과로 앱의 저장 대상을 구성합니다.

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

## 예제 2. 호출 결과 확인

선택한 행은 원본 배열의 앞부분이라고 가정하지 않고 API에서 읽습니다.

```javascript
const selectedIds = await grid.getSelectedRowIds();
console.log(selectedIds);
```

결과 확인: 선택 ID를 바탕으로 승인·내보내기 대상을 정합니다. 호출한 것과 서버 저장 완료는 다른 단계입니다.

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

## 예제 3. 화면 해제 때 정리

첫 번째 예제의 AbortController로 구독을 일괄 해제합니다.

```javascript
controller.abort();
```

결과 확인: 화면을 다시 열 때 이벤트가 중복으로 실행되지 않습니다. 앱이 만든 WebSocket·타이머·요청도 함께 정리하세요.

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

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

이벤트를 받은 뒤 같은 값을 다시 쓰는 코드는 이벤트 순환을 만들 수 있습니다. 사용자 변경과 앱 반영의 출처를 구분합니다.

이벤트의 rowIndex와 안정적인 rowId를 혼동하지 마세요. 장기 저장 키는 ID를 사용합니다.

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

## 이 기능에 사용하는 API

- [context](https://grid.syidax.com/ko/docs/options/context.md) — 앱의 공통 문맥을 콜백과 Grid API에 전달합니다. 사용자 권한·서비스 등 앱이 관리하는 정보를 연결할 때 사용합니다.
- [getApi](https://grid.syidax.com/ko/docs/methods/getApi.md) — 현재 Grid의 타입 지정 API와 앱 context에 접근합니다. 초기화가 완료된 요소에서 읽으세요.
- [getRow](https://grid.syidax.com/ko/docs/methods/getRow.md) — 안정적인 행 ID로 행 객체를 찾습니다. 화면 인덱스로 찾는 API와 구분합니다.
- [getDisplayedRowAtIndex](https://grid.syidax.com/ko/docs/methods/getDisplayedRowAtIndex.md) — 현재 표시 순서의 인덱스로 행 객체를 찾습니다. 정렬·필터·그룹에 따라 같은 인덱스의 행은 달라질 수 있습니다.
- [forEachRow](https://grid.syidax.com/ko/docs/methods/forEachRow.md) — 행 객체를 순회하며 콜백을 실행합니다. 현재 화면의 표시 순서가 필요하면 forEachDisplayedRow를 사용합니다.
- [forEachDisplayedRow](https://grid.syidax.com/ko/docs/methods/forEachDisplayedRow.md) — 현재 표시 행을 순회합니다. 원본 데이터 순서와 표시 순서를 구분해야 하는 앱 기능에 사용합니다.
- [cellClicked](https://grid.syidax.com/ko/docs/events/cellClicked.md) — 셀을 한 번 클릭했을 때 발생합니다. 실제 행·필드와 입력 문맥은 detail에서 읽습니다.
- [cellDoubleClicked](https://grid.syidax.com/ko/docs/events/cellDoubleClicked.md) — 셀을 두 번 클릭했을 때 발생합니다. 편집 시작과 앱 상세 열기가 충돌하지 않도록 처리합니다.
- [rowClicked](https://grid.syidax.com/ko/docs/events/rowClicked.md) — 행을 클릭했을 때 발생합니다. 클릭 자체와 선택 결과는 구분합니다.
- [gridObjectChanged](https://grid.syidax.com/ko/docs/events/gridObjectChanged.md) — 현재 행·열 등 공개 객체의 상태가 바뀌었을 때 발생합니다. detail의 대상과 변경 내용을 읽습니다.

<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-event-access) — 직접 체험 가능한 범위는 해당 가이드에 안내되어 있습니다.