Backdrop

Backdrop (배경 레이어)

사용자가 화면 위의 특정 요소에 집중하도록 시야를 좁혀 주는 Backdrop 컴포넌트에 대해 알아봅니다. 애플리케이션의 상태 변화를 알리는 역할을 하며, 로더나 다이얼로그를 만들 때 함께 쓰이곤 해요.

출처: 문서

본문

Backdrop 컴포넌트는 사용자의 초점을 화면 위의 특정 요소로 좁혀 줍니다.

Backdrop은 애플리케이션 내부의 상태 변화를 알리는 신호 역할을 하며, 로더나 다이얼로그 등을 만드는 데 사용할 수 있어요. 가장 단순한 형태로는 애플리케이션 위에 어두워진 레이어를 하나 얹는 것이라고 보시면 됩니다.

예시 (Example)

아래 데모는 로딩 상태를 나타내기 위해 전경에 원형 진행 표시(Circular Progress)를 올려 둔 기본 Backdrop을 보여줍니다. Show Backdrop을 클릭한 뒤에는 페이지의 아무 곳이나 클릭하면 닫힙니다.

import * as React from 'react';
import Backdrop from '@mui/material/Backdrop';
import CircularProgress from '@mui/material/CircularProgress';
import Button from '@mui/material/Button';

export default function SimpleBackdrop() {
  const [open, setOpen] = React.useState(false);
  const handleClose = () => {
    setOpen(false);
  };
  const handleOpen = () => {
    setOpen(true);
  };

  return (
    <div>
      <Button onClick={handleOpen}>Show backdrop</Button>
      <Backdrop
        sx={(theme) => ({ color: '#fff', zIndex: theme.zIndex.drawer + 1 })}
        open={open}
        onClick={handleClose}
      >
        <CircularProgress color="inherit" />
      </Backdrop>
    </div>
  );
}

전환 (Transitions)

Backdrop은 기본적으로 Fade를 사용합니다. 다른 전환 효과로 바꾸거나 전환 관련 props를 넘기고 싶다면 slots.transition과 slotProps.transition을 쓰면 돼요.

Backdrop API

Demos

이 React 컴포넌트의 사용 예시와 자세한 내용은 컴포넌트 데모 페이지에서 확인할 수 있어요.

Import

import Backdrop from '@mui/material/Backdrop';
// or
import { Backdrop } from '@mui/material';

Props

Name Type Default Required Description
open bool - Yes
children node - No
classes object - No Override or extend the styles applied to the component.
component elementType - No
invisible bool false No
slotProps { root?: func | object, transition?: func | object } {} No
slots { root?: elementType, transition?: elementType } {} No
sx Array<func | object | bool> | func | object - No The system prop that allows defining system overrides as well as additional CSS styles.
transitionDuration number | { appear?: number, enter?: number, exit?: number } - No

참고: ref는 루트 요소 (HTMLDivElement).

그 외에 제공된 props는 루트 요소 (Fade).

Inheritance

위에서 명시적으로 다루진 않았지만, Fade 컴포넌트의 props도 Backdrop에서 사용할 수 있어요.

Theme default props

MuiBackdrop을 사용하면 테마에서 이 컴포넌트의 기본 props를 바꿀 수 있어요.

Slots

Name Default Class Description
root 'div' .MuiBackdrop-root The component that renders the root.
transition Fade - The component that renders the transition.
Follow this guide to learn more about the requirements for this component.

CSS

Rule name

Global class Rule name Description
- invisible Styles applied to the root element if invisible={true}.

Source code

이 페이지에서 원하는 정보를 찾지 못했다면, 더 자세한 내용은 컴포넌트 구현을 살펴보는 것도 좋아요.

더 알아보기 (Learn more)