[React] Material-UI Popover에서 Popper로 전환한 시행착오

1. 배경 및 요구사항

프로젝트에서는 Popover를 사용하여 특정 UI를 구현하고자 하였다. 그러나 팝오버가 열려 있는 동안에도 배경 요소와 상호작용할 수 있도록 하려는 요구사항이 존재하였다.

2. 초기 시도: Popover의 ModalProps 활용

Material-UI Popover는 내부적으로 Modal을 사용하여 포커스를 팝오버 내부로 강제하는 특성을 지니고 있다. 이에 ModalProps를 이용하여 백드롭 숨김, 스크롤 잠금 해제, 포커스 강제 해제를 시도하였다. 아래 코드는 그 예이다.

<Popover
  open={Boolean(anchorEl)}
  anchorEl={anchorEl}
  onClose={handleClose}
>
  {/* Popover 내용 */}
</Popover>

그러나 이 방법을 사용하면 TypeScript 에러가 발생하였다.
오류 메시지는 다음과 같다.

Property 'ModalProps' does not exist on type 'IntrinsicAttributes & PopoverProps'. ts(2322)

이 오류는 사용 중인 Material-UI 버전(v4)에서 PopoverProps에 ModalProps가 포함되어 있지 않기 때문이다.

3. 문제점 및 원인

문제점은 팝오버가 열려 있는 동안 배경 요소와의 상호작용이 제한되어 UI가 굳어지는 현상이 발생한다는 것이다.
원인은 Material-UI v4의 Popover가 Modal 기반으로 동작하면서 ModalProps를 통한 커스터마이징 옵션을 제공하지 않기 때문이다.
(확실하지 않음: 프로젝트의 Material-UI 버전에 따라 다를 수 있다.)

4. 대안: Popper 컴포넌트 사용

Material-UI의 Popper는 Modal을 사용하지 않으므로, 팝오버와 유사하게 위치 지정이 가능하면서도 배경과의 상호작용을 제한하지 않는다. 따라서 Popover 대신 Popper를 사용하는 것으로 전환하였다. 아래 코드는 그 예이다.

import React from 'react';
import Popper from '@material-ui/core/Popper';
import Paper from '@material-ui/core/Paper';

function CustomPopper({ anchorEl, open, children }) {
  return (
    <Popper open={open} anchorEl={anchorEl} placement="bottom-end">
      <Paper>
        {children}
      </Paper>
    </Popper>
  );
}

위 코드에서는 Popper를 사용하여 팝업을 구현하고, Paper 컴포넌트를 통해 내용 영역을 감싸 배경과의 상호작용을 제한하지 않도록 구성하였다.

5. 결론 및 참고 사항

결론적으로, Material-UI v4 환경에서는 Popover에 ModalProps를 적용할 수 없으므로 배경 상호작용을 허용하기 위해 Popper 컴포넌트를 사용하는 것이 적합하다.

참고로 Material-UI 공식 문서를 확인할 수 있으며, 아래 링크를 참고할 것을 권장한다.

• Material-UI Popover 공식 문서
• Material-UI Popper 공식 문서

이 글은 시행착오를 겪으며 얻은 경험을 바탕으로 작성된 내용이다. 상황에 따라 다른 해결 방법이 존재할 수 있으므로 참고할 것을 권장한다.