728x90 ui 개발2 Material UI Popper 컴포넌트 버그 케이스 대응 기록 및 동작 구조 목차Popper 컴포넌트 소개버그 케이스별 대응 기록위치 설정 오류렌더링 타이밍 이슈리사이징 및 스크롤 문제z-index 및 오버레이 이슈Popper 동작 구조 도식화렌더링 프로세스포지셔닝 메커니즘가상 요소 활용최적화 전략Popper 컴포넌트 소개Material UI의 Popper 컴포넌트는 @popperjs/core 라이브러리를 기반으로 구현된 컴포넌트로, 툴팁, 드롭다운, 메뉴 등 다양한 팝오버 UI 요소를 화면에 표시하는 데 사용됩니다. Popper는 포털(Portal)을 통해 DOM의 계층 구조와 독립적으로 렌더링되며, 지정된 앵커 요소(anchorEl)를 기준으로 위치가 계산됩니다.import { Popper } from '@mui/material'; {({ TransitionProps }) .. 2025. 4. 22. [React] Material-UI Popover에서 Popper로 전환한 시행착오 1. 배경 및 요구사항프로젝트에서는 Popover를 사용하여 특정 UI를 구현하고자 하였다. 그러나 팝오버가 열려 있는 동안에도 배경 요소와 상호작용할 수 있도록 하려는 요구사항이 존재하였다.2. 초기 시도: Popover의 ModalProps 활용Material-UI Popover는 내부적으로 Modal을 사용하여 포커스를 팝오버 내부로 강제하는 특성을 지니고 있다. 이에 ModalProps를 이용하여 백드롭 숨김, 스크롤 잠금 해제, 포커스 강제 해제를 시도하였다. 아래 코드는 그 예이다. {/* Popover 내용 */}그러나 이 방법을 사용하면 TypeScript 에러가 발생하였다.오류 메시지는 다음과 같다.Property 'ModalProps' does not exist on type 'Int.. 2025. 3. 14. 이전 1 다음 728x90