[TIL] 20220712 ag grid 테이블 상태 저장하는 것에 대한 기묘한 현상

1. ag grid 테이블 상태 저장하는 것에 대한 기묘한 현상

(나만 알아볼 수 있음)

어떤 페이지는 이런 필터가 있는 페이지가 있고

어떤 페이지는 없다. 

 

없는 페이지에서 테이블에 필터를 걸거나 컬럼 위치를 바꾸고 다른 페이지를 갔다가 다시 돌아왔을때

상태저장을 하기 위해서

 

	const saveState = () => {
	try {
	const colState = gridColumnApi.getColumnState();
	const savedFilterModel = gridApi.getFilterModel();
	dispatch(saveTableState(location.pathname, savedFilterModel, colState));
	} catch (error) {
	console.log('save state failed');
	}
	};
	const restoreFilter = tableFilter => {
	if (tableFilter) {
	const tableFilterKeys = Object.keys(tableFilter);
	tableFilterKeys.map(p => gridApi.setFilterModel(tableFilter));
	gridApi.onFilterChanged();
	} else {
	console.log('filter is not exist');
	}
	};
	const restoreState = (tableFilter, columnState) => {
	try {
	gridColumnApi.applyColumnState({
	state: columnState,
	applyOrder: true,
	});
	restoreFilter(tableFilter);
	} catch (error) {
	console.log('restore state error!');
	}
	};
	const onFirstDataRendered = params => {
	if (this_page_info) {
	restoreState(this_page_info.filter, this_page_info.column);
	}
	autoSizeColumns(params);
	};

view raw saveTableFilter.js hosted with ❤ by GitHub

위 코드와 같이 사용할 수 있었다. 

 

위 코드에서 gridColumnApi 와 gridApi 는 onGridReady함수를 실행할 때

useState를 사용해서 상태를 초기값에서 할당해주는 방식이다. 

 

하지만 날짜 필터가 있는 페이지에서는 gridColumnApi가 null로 나와서 상태 저장 코드를 실행할 수 없었다. 

위 필터는 ag grid자체를 건드리는 것이 아니라 날짜를 선택했을 때 다시 api를 호출하는 형태인데 도무지 원인은 알 수 없었다. 

그러나 해결방법은 있다. 

 

 

	const saveState = event => {
	try {
	const colState = event.columnApi.getColumnState();
	const savedFilterModel = event.api.getFilterModel();
	dispatch(saveTableState(location.pathname, savedFilterModel, colState));
	} catch (error) {
	console.log('save state failed', error);
	}
	};
	const restoreFilter = (event, tableFilter) => {
	if (tableFilter) {
	const tableFilterKeys = Object.keys(tableFilter);
	tableFilterKeys.map(p => event.api.setFilterModel(tableFilter));
	event.api.onFilterChanged();
	} else {
	console.log('filter is not exist');
	}
	};
	const restoreState = (event, tableFilter, columnState) => {
	try {
	event.columnApi.applyColumnState({
	state: columnState,
	applyOrder: true,
	});
	restoreFilter(event, tableFilter);
	} catch (error) {
	console.log(error);
	}
	};
	const onFirstDataRendered = params => {
	if (this_page_info) {
	restoreState(params, this_page_info.filter, this_page_info.column);
	}
	autoSizeColumns(params);
	};

view raw saveTableFilter2.js hosted with ❤ by GitHub

코드의 차이를 본다면,

위에서는 useState에서 세팅한 columnApi를 사용했다면 여기서는 ag grid  event가 일어났을때 파라미터로 들어오는 event에서 직접 columnApi 를 가져와서 사용하고 있다. 

 

	<AgGridReact
	rowData={status_check_list}
	ref={gridRef}
	onGridReady={onGridReady}
	gridOptions={gridOptions}
	className={clsx(classes.agGrid, 'ag-theme-alpine')}
	onFirstDataRendered={onFirstDataRendered}
	onFilterChanged={saveState}
	onColumnMoved={saveState}
	onRowDataChanged={onRowDataChanged}
	/>

view raw aggridReact.js hosted with ❤ by GitHub

event란 on으로 시작하는 ag grid event이다. 

여기서 넘어오는 event로 사용해서 해결했다. 

 

더 기묘한 것은 그럼 날짜 필터가 없는 페이지도 event로 직접 가져오는 것으로 통일해야겠다 생각했는데

그건 또 안된다. 

필터가 없는 페이지는 useState, 필터가 있는 페이지는 event에서 columnApi를 가져와서 사용해야한다. 

 

 

---

코드가 똑같은데 왜 안될까 하면서 고민하고 있었는데 실장님이 와서 무슨 심각한 고민을 하고 있는 것 같다며 같이 고민을 해주셨다.

그리고 플로우를 보면서 어디 어디 콘솔을 찍어보라고 하시면서 점점 실마리를 찾아가는데 너무 신기했다!!

역시 문제가 안풀릴때는 따라가면서 콘솔을 다 찍어보는 것이구나..!!!!

그리고 그냥 지나칠 수도 있는데 도와주시는 시니어분들이 있어 정말 감사하고 행운이다 

앞으로는 나도 척척박사가 되고싶다 하하