React의 Material UI에서 Dialog 컴포넌트 사용 시 PaperComponent prop

Material UI의 Dialog 컴포넌트는 모달 대화 상자를 표시할 때 사용됩니다. 이 다이얼로그의 배경 부분, 즉 내용이 표시되는 종이 형태의 영역을 제어하기 위해 사용되는 prop이 바로 PaperComponent입니다.

기본적으로 Dialog는 내부적으로 Material UI의 Paper 컴포넌트를 사용하여 다이얼로그의 표면을 렌더링합니다. 이 Paper 컴포넌트는 그림자 효과나 모서리 라운딩 등 Material Design의 지침에 맞는 스타일을 적용해 줍니다.

하지만 때로는 다이얼로그의 기본 동작이나 스타일을 변경하고 싶을 때가 있습니다. 예를 들어, 다이얼로그를 사용자가 드래그하여 위치를 옮길 수 있도록 만들거나, Paper 컴포넌트가 아닌 다른 커스텀 컴포넌트를 사용하여 완전히 다른 모양이나 동작을 적용하고 싶을 때 PaperComponent prop을 활용합니다.

PaperComponent prop에는 다이얼로그의 배경으로 사용할 React 컴포넌트 자체를 전달하면 됩니다. Material UI 문서에서는 주로 다이얼로그를 드래그 가능하게 만드는 예시에서 이 PaperComponent를 사용하여 Paper 컴포넌트에 드래그 로직을 추가한 커스텀 컴포넌트를 전달하는 방식을 보여줍니다.

간단한 예시를 들어보겠습니다. 만약 다이얼로그를 드래그 가능하게 만들고 싶다면, Draggable 라이브러리 등을 사용하여 Paper 컴포넌트를 감싸는 커스텀 컴포넌트를 만들고, 그 컴포넌트를 PaperComponent로 전달할 수 있습니다.

import * as React from 'react';
import Dialog from '@mui/material/Dialog';
import Paper from '@mui/material/Paper';
import type { PaperProps } from '@mui/material/Paper';
import Draggable from 'react-draggable';

interface PaperComponentProps extends PaperProps {
  /**
   * The component used for the root node.
   */
  component?: React.ElementType;
}

function PaperComponent(props: PaperComponentProps) {
  return (
    <Draggable
      handle="#draggable-dialog-title" // 드래그 핸들로 사용할 요소의 ID
      cancel={'[class*="MuiDialogContent-root"]'} // 다이얼로그 콘텐츠 영역에서는 드래그 취소
    >
      <Paper {...props} />
    </Draggable>
  );
}

export default function DraggableDialog() {
  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <button onClick={handleClickOpen}>
        다이얼로그 열기
      </button>
      <Dialog
        open={open}
        onClose={handleClose}
        PaperComponent={PaperComponent} // 여기서 커스텀 PaperComponent를 전달합니다.
        aria-labelledby="draggable-dialog-title"
      >
        {/* 다이얼로그 내용은 평소대로 작성합니다. */}
        <h2 id="draggable-dialog-title" style={{ cursor: 'move' }}>
          드래그 가능한 다이얼로그 제목
        </h2>
        <div>
          다이얼로그 내용입니다. 이 영역은 드래그되지 않습니다.
        </div>
        <button onClick={handleClose}>닫기</button>
      </Dialog>
    </div>
  );
}

 

위 예시에서 PaperComponent라는 함수형 컴포넌트를 정의하고, 이 컴포넌트가 Material UI의 Paper 컴포넌트를 react-draggable로 감싸서 반환하도록 했습니다. 이렇게 만든 PaperComponent를 Dialog의 PaperComponent prop에 전달하면, 해당 다이얼로그는 드래그 가능한 동작을 가지게 됩니다.

요약하자면, PaperComponent는 Dialog 컴포넌트의 기본 배경 역할을 하는 Paper 컴포넌트를 대체하거나 확장할 때 사용되며, 이를 통해 다이얼로그에 커스텀 동작이나 스타일을 적용할 수 있습니다.