상태 저장과 복원.
열·정렬·필터·선택 등 화면 구성을 저장하고, 복원 결과를 확인하세요.
빠르게 이해하기
사용자가 조절한 열 너비와 정렬·필터를 다음에도 이어서 사용하게 할 때 화면 상태를 저장합니다. 주문 값 자체를 백업하는 기능과 구분하세요.
앱에서 연결하는 순서
- 작업 화면에서 저장
Grid 작업 화면에서 열 너비나 정렬을 바꾼 뒤 하단 상태 저장을 누르세요. getState() 결과가 표시됩니다.
- 바꾼 뒤 복원 비교
같은 화면에서 너비나 정렬을 다시 바꾸고 상태 복원을 누르세요. 저장한 구성으로 돌아오는지 확인합니다.
- 앱의 저장소 연결
새로고침 후에도 유지하려면 앱에서 getState() 결과를 보관하세요. 같은 데이터와 열을 준비한 뒤 setState()로 복원하고 보고서를 확인합니다.
저장한 시점의 열·정렬·필터 등 화면 구성을 다시 사용할 수 있습니다.
데모의 저장 버튼은 현재 작업 화면 메모리에만 보관합니다. 새로고침이나 다른 종류의 문서 화면으로 이동하면 데모 저장값이 사라질 수 있습니다.
알아두면 쉬운 용어
- 직렬화
- 저장하거나 전송할 수 있도록 객체를 JSON 같은 형식으로 바꾸는 과정입니다.
- 복원 보고서
- 어떤 영역을 복원했고 무엇을 복원하지 못했는지 알려 주는 결과입니다.
상태 저장
#getState()로 열·정렬·필터·선택 등 화면 구성의 스냅샷을 얻습니다. 작업 화면의 Grid 아래 옵션에서 상태 저장·복원 버튼으로 체험할 수 있습니다. 데모의 저장 상태는 현재 작업 화면 메모리에만 유지됩니다.
const savedState = await grid.getState();
const serialized = JSON.stringify(savedState);
// 서비스의 사용자 설정 저장소에 serialized를 보관하세요.상태 복원
#동일한 행·열 식별자를 준비한 뒤 setState()를 호출하고 반환 보고서를 확인하세요. 전체 복원 여부는 ok, 적용된 영역은 appliedSlices에서 확인합니다. 일부 기능의 권한이나 데이터가 없으면 모든 영역이 복원되지는 않을 수 있습니다.
const report = await grid.setState(JSON.parse(serialized));
console.log(report);
if (!report.ok) {
// issues·unrestorableSlices·droppedSlices 등 복원 보고서를 확인합니다.
console.warn('일부 화면 상태를 복원하지 못했습니다.', report);
}화면 상태와 원본 데이터
#Grid state는 업무 행 데이터의 백업이 아닙니다. 편집한 데이터를 서버에 저장하는 동작, 데이터 스냅샷, 화면 구성 복원을 구분하세요. 사용자나 데이터셋이 바뀌면 해당 대상의 저장 상태를 불러와야 합니다.
stateUpdated의 detail은 변경된 영역에 대한 알림입니다. 전체 저장 상태가 필요하면 알림을 받은 뒤 getState()를 호출하세요.