행 DataGrid MUI v5 컴포넌트에 사용자 정의 편집 및 삭제 컴포넌트 추가하기
React 앱에서 UI 라이브러리로 Material UI (MUI) v5 컴포넌트를 사용할 때, 데이터그리드(DataGrid)나 데이터그리드프로(DataGridPro) 컴포넌트 내부에 사용자 정의 편집 및 삭제 행을 만들어야 할 때가 있습니다. 이 블로그 포스트에서는 이러한 사용자 정의 기능을 구현하는 방법과 함께 발생할 수 있는 일반적인 문제를 해결해보겠습니다.
마우스오버한 행에 편집 및 삭제 아이콘 추가하기
목표는 새 열을 추가하지 않고 기존 레이아웃에 간섭하지 않으면서 마우스오버한 행에 편집 및 삭제 아이콘을 표시하는 것입니다. 이를 위해 다음과 같은 솔루션을 살펴보겠습니다:
componentsProps={{
row: {
onMouseEnter: onMouseEnterRow,
onMouseLeave: onMouseLeaveRow
}
}}
DataGrid나 DataGridPro 컴포넌트의 componentsProps 속성을 사용하여 행에 onMouseEnter와 onMouseLeave 이벤트 핸들러를 추가할 수 있습니다. 이 핸들러는 마우스오버한 행을 추적하고 필요할 때 편집 및 삭제 아이콘을 표시하는 역할을 담당합니다. 곧 이벤트 핸들러의 구현에 대해 다루겠습니다.
{
field: "actions",
headerName: "",
width: 120,
sortable: false,
disableColumnMenu: true,
renderCell: (params) => {
if (hoveredRow === params.id) {
return (
<Box
sx={{
backgroundColor: "whitesmoke",
width: "100%",
height: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center"
}}
>
<IconButton onClick={() => console.log(params.id)}>
<EditIcon />
</IconButton>
<IconButton onClick={() => console.log(params.id)}>
<DeleteIcon />
</IconButton>
</Box>
);
} else return null;
}
}
폭이 120픽셀인 “actions”라는 열을 정의하고, 이 열에 편집 및 삭제 아이콘이 포함될 것입니다. renderCell 함수에서 현재 행이 마우스오버한 행인지를 확인하기 위해 해당 행의 ID와 hoveredRow 변수에 저장된 값을 비교합니다. 일치하는 경우, 셀 내부에 가운데 정렬된 아이콘을 표시하는 Box 컴포넌트를 반환합니다.
이제 이벤트 핸들러를 구현해보겠습니다:
const onMouseEnterRow = (event) => {
setHoveredRow(event.row.id);
};
const onMouseLeaveRow = () => {
setHoveredRow(null);
};
onMouseEnterRow 함수는 마우스 커서가 행에 진입할 때 트리거되며, 현재 마우스오버한 행의 ID로 hoveredRow 상태를 업데이트합니다. 반대로, onMouseLeaveRow 함수는 마우스 커서가 행을 벗어날 때 트리거되며, hoveredRow 상태를 null(빈 값)으로 재설정합니다.
Popper 컴포넌트로 레이아웃 문제 해결하기
호버 기능을 구현하는 동안 Popper 컴포넌트와 관련된 몇 가지 레이아웃 문제가 발생할 수 있습니다. 다음은 일부 해결 방법입니다:
- Popper 컴포넌트에
disablePortal={true}속성을 추가해보세요. 이 속성은 Popper 컴포넌트가 행 바깥쪽에 렌더링되는 것을 방지합니다. - DataGrid 컴포넌트의 열 헤더, 행, 페이지네이션 컨테이너의 z-index 속성을 조정해보세요. Popper 컴포넌트 자체의 z-index도 수정하여 레이아웃 내에서의 스택 순서를 제어할 수 있습니다.
- 위의 방법이 원하는 결과를 제공하지 않는 경우, DataGrid에 몇 개의 새 열을 추가하는 것도 고려해보세요. 이렇게 하면 Popper 컴포넌트의 위치 조정에 도움이 될 수 있습니다.
결론
이 블로그 포스트에서는 MUI v5의 DataGrid나 DataGridPro 컴포넌트에 마우스오버한 행에 사용자 정의 편집 및 삭제 컴포넌트를 추가하는 방법을 살펴보았습니다. componentsProps 속성을 활용하고 적절한 이벤트 핸들러를 구현함으로써 원하는 기능을 달성할 수 있었습니다. 또한, Popper 컴포넌트와 관련된 레이아웃 문제를 해결하는 몇 가지 해결 방법에 대해서도 논의했습니다. 이러한 지식을 활용하여, MUI v5로 개발된 React 앱의 행 상호작용을 사용자 정의함으로써 사용자 경험을 향상시킬 수 있습니다.
참고 자료 :
같은 카테고리의 다른 글 보기 :
