[ react, MUI ] mui의 dataGrid props "apiRef" 활용
뻔한 얘기이겠지만?? 데이터 그리드에서도 ref를 사용할 수 있다.
useGridApiRef를 import하면, 데이터그리드 핸들링이 훨씬 편하다.
이를 활용한 코드를 소개하려고 한다.
1. MUI 데이터그리드 정렬 기능의 동적 해제 기능 추가
mui DataGrid에는 기본적으로 sorting 기능이 있다.
컬럼에 마우스 오버하면 화살표가 생기면서 오름차순, 내림차순의 정렬이 가능하다. 이 때 정렬 기능을 사용하고나서 자동 해제를 동적으로 조절해야할 때가 있었다. 화면 내부에서 reset버튼을 눌렀을 때 화면을 새로 그리는데, 사실 데이터그리드는 데이터가 변경될 뿐 실제로 새롭게 화면이 렌더링이 되는 것은 아니라서 정렬 기능이 리셋되지 않았다.
이 때 나는
이런식으로 정렬 해제를 해주었다. reset을 알리는 상태가 감지되면, 정렬 상태가 만약 함수다(사용되었다)면, sortModel을 빈 배열을 전달하여 정렬되었던 상황을 해제하는 것.
2. CheckboxSelection props 사용 시, onRowSelectionModelChange props로 인한
렌더링 과부화 핸들링
mui dataGrid에서 checkBox 기능이 있다.
이렇게 왼쪽에 체크박스가 있는 경우인데. 보통 체크가 있는 경우에는, 이 체크된 row에대한 어떤 관리가 필요한 경우가 대다수이다. 선택한 이유가 있을 거 아냐?? 그를위해 사용되는 props가 바로
onRowSelectionModelChange 이다.
저렇게 rowSelectionModel, onRowSelectoinModalChage로 상태 관리하는 방법을 사용하여 체크박스 기능을 이용할 수 있다. 하지만 내가 이 방식을 했을 때 치명적인 단점이 있었다. 간단한 정보, 간단한 객체 전달의 경우엔 저 props를 사용해도 무방했다. 하지만, 대량의 데이터를 일괄 처리할 때 수많은 렌더링과 어마어마한 렉을 경험했다. 체크박스를 클릭하는 순간 데이터그리드 내부에서 엄청난 렌더가 일어나면서 체크되는 그 이벤트 자체가 느리게 일어나고 사용자 불편감을 어마어마하게 늘렸다. 내가 생각했을 때 저 프롭스는, 체크할 때마다 실행되는 props이기에, 데이터의 수가 적거나, 실시간으로 간단한 데이터의 전달이거나, 직관적인 어떤 상태 변화, 어떤 화면적 렌더를 일으키는 정도의 작은 이벤트로만 사용해야할 것 같다. 저 change가 일어나는 순간 데이터그리드 내부 모든 row의 렌더가 일어나는 것 같다.. 그래서 데이터가 4만건, 10만건 되는 row라면? 끔찍해짐 ㅎㅎ. 그리고 4만건의 모든 데이터의 값을 핸들링하는 건 저 프롭스에 어울리지 않다..
선택한 방법은 ref였다. 우선, 체크박스로 row를 선택한다고 당장의 큰 이벤트를 일으킬 것도 아니며, 단지 체크된 row의 데이터를 가지고 다른 액션을 취할 때 그 데이터를 사용하는 것이기 때문에, 굳이 row를 체크할 때마다의 실시간 데이터를 따로 state에 담을 필요도 없다. 선택한 데이터를 가지고 다음 액션을 취할 때, 그 때 단 한 번 그 데이터들을 취합해 전달하기만 된다고 생각한다.
예를들어 나같은 경우는 선택한 row 데이터만 가지고 새로운 모달창을 띄우고, 그 모달창 안에 내가 선택한 row 데이터를 화면에 뿌리려고 한다. 그 때 ref를
selectedGridRowsSelector를 새로 import하여 ref.current.state값과, 현재 인스턴스 id값까지 넘기면 한번에 select된 데이터들을 가져온다. 이렇게 하면 checke 상태의 변화에대해 데이터그리드가 멈추고 렉걸리는 현상은 일어나지 않게된다.
MUI rowSelection 참고문헌 링크를 추가한다.