# 행, 열, 그리고 상태

rowData는 주문의 실제 값이고 columnDefs는 그 값을 어떤 열에 보여 줄지 설명합니다. field는 데이터를 읽을 키이며 headerName은 화면 제목입니다. 제목을 바꿔도 원본 필드 이름은 바뀌지 않습니다.

Canonical: https://grid.syidax.com/ko/docs/guides/concepts/

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

## 동작 원리와 선택 기준

화면 위치와 업무 ID를 구분하세요. 정렬·필터·그룹화 후 표시 위치는 달라집니다. getRowId가 반환하는 고유 ID는 갱신·선택·복원 시 같은 주문을 찾는 기준입니다.

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

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

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

## 예제 1. 열 제목만 현지화

서버 데이터의 product 키는 유지하고 화면 제목만 한국어로 바꿉니다.

```javascript
grid.columnDefs = [{ field: 'product', headerName: '제품명', width: 220 }];
```

결과 확인: 데이터 변환 없이 제목만 달라집니다. field를 제품명으로 바꾸면 행에 그 키가 없어서 값이 비게 됩니다.

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

## 예제 2. ID로 변경 대상 찾기

ORD-0002가 정렬 후 맨 위로 와도 ID로 찾은 주문만 수정합니다.

```javascript
grid.getRowId = row => row.id;
const target = grid.rowData.find(row => row.id === 'ORD-0002');
if (target) await grid.applyTransaction({ update: [{ ...target, quantity: 25 }] });
```

결과 확인: 원본 배열의 두 번째 행이라는 가정을 하지 않으므로 표시 순서가 바뀌어도 같은 주문을 갱신합니다.

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

## 예제 3. 배열과 단순 값 전달

height는 숫자 또는 CSS 길이이고, 열 정의와 데이터는 JavaScript 객체입니다.

```javascript
grid.height = '60vh';
grid.pagination = false;
grid.rowData = [...grid.rowData, { id: 'ORD-0004', product: 'Delta', quantity: 5 }];
```

결과 확인: 새 배열이 전달되면서 주문이 추가됩니다. 문자열로 직렬화한 JSON을 HTML 속성에 넣는 방식과 구분합니다.

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

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

ID는 중복되거나 편집할 때마다 달라지면 안 됩니다. 숫자 1과 문자열 "1"처럼 ID 형식을 바꾸는 것도 피하세요.

기본 열 설정 defaultColDef와 개별 열 설정이 함께 있으면 개별 열의 설정을 확인하세요. 전체 편집을 켰더라도 주문 번호 열은 editable: false로 보호할 수 있습니다.

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

## 이 기능에 사용하는 API

공통 설정과 아래 관련 문서를 함께 참고하세요.

- [Grid 속성](https://grid.syidax.com/ko/docs/options.md)
- [열 설정](https://grid.syidax.com/ko/docs/columns.md)
- [메서드](https://grid.syidax.com/ko/docs/methods.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/concepts) — 직접 체험 가능한 범위는 해당 가이드에 안내되어 있습니다.