📌 How to

MUI의 DataGrid에서 선택된 row를 버튼 클릭이나 기타 이벤트 후에 초기화 하려고 사용하는 코드이다.
selectionModel을 설정하면 dataGrid에서 선택된 rows의 상태를 변경하고, 값을 가져올 수 있다.

const [selectionModel, setSelectionModel] = React.useState([]);

return (
	<div>
		<DataGrid
		  rows={rows}
		  columns={columns}
		  loading={loading}
		  checkboxSelection
		  onSelectionModelChange={setSelectedRows}
		  selectionModel={selectedRows}
		  components={{
		    LoadingOverlay: LinearProgress,
		    NoRowsOverlay: CustomNoRowsOverlay,
		  }}
		  sx={{ borderRadius: 0 }}
		/>
		<Button onClick={() => setSelectionModel([])} >Deselect all</Button>
	</div>
)

참조

https://codesandbox.io/s/material-demo-forked-xen7q?file=/demo.tsx:316-395
https://stackoverflow.com/questions/64104554/can-i-initialize-the-checkbox-selection-in-mui-datagrid

P.S. 위의 코드는 DataGrid 5.x.x 버전이고, 6 버전에서는 selectionModel 대신에 rowSelectionModel로 이름이 변경되었다. 참고해서 사용해야 한다. 아래는 자세한 내용.
https://mui.com/x/api/data-grid/data-grid/