728x90 버그 케이스별 대응 기록 & 컴포넌트별 동작 구조 도식화3 MUI DataGridPro Drag & Drop 시 selection 상태가 undefined로 나오는 문제 해결 🧨 문제 상황 및 원인 분석파일 리스트에서 드래그 기능을 구현하던 중, 선택된 항목을 기반으로 데이터를 설정하려 했지만 selectedItems가 undefined로 나와 드래그 대상 판단이 되지 않았음.🧪 시행착오 및 중간 시도들 useCallback 의존성에 selectedItems 포함 → 여전히 drag 이벤트 시점에서는 반영되지 않음useEffect에서 selectedItems 확인 시 정상 → 렌더 타이밍과 이벤트 타이밍 불일치최종적으로 클로저 문제로 판단 🧾 개선 코드 (배열만 처리)const selectedItemsRef = useRef([]);useEffect(() => { selectedItemsRef.current = selectedItems;}, [selectedItems]).. 2025. 6. 12. MUI DataGridPro에서 "Rendered fewer hooks than expected" 오류 해결기 – renderCell 내 Hook 분리로 해결 작성 배경 및 문제 상황React + MUI DataGridPro 환경에서 특정 컬럼을 pin to left(좌측 고정) 했을 때 아래와 같은 치명적인 오류가 발생:Rendered fewer hooks than expected. This may be caused by an accidental early return statement.같은 컬럼을 pin to right(우측 고정) 했을 때는 정상 작동하지만, 좌측 고정 시에만 오류 발생. 또한, i18next를 활용한 다국어 설정 변경 후 다이어로그를 다시 열었을 때도 같은 오류가 간헐적으로 발생함.원인 분석해당 오류는 React에서 Hook 호출 순서가 불일치할 때 발생함. 특히 다음과 같은 경우에 자주 발생:renderCell 함수 내부에서 useSt.. 2025. 6. 10. 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. 이전 1 다음 728x90
