프론트엔드 MUI5 라이브러리의 Drawer 컴포넌트 질문

Question

안녕하세요. 신입 개발자로 혼자 프론트를 맡으며 일을 하고 있습니다. 현재 외주에서 받은 코드를 바탕으로 개발중에 있는데 도저히 해결되지 않는 부분이 있어 질문해봅니다. 내용이 길어질 수 있으나 최대한 간단하게 적어보겠습니다.아래 내용은 Drawer를 관리하는 MainDrawer 컴포넌트 내용 중 일부입니다.import { dispatch, useSelector } from 'store'; import { openDrawer } from 'store/reducers/menu'; const MainDrawer = ({ window }) => { const theme = useTheme(); const downLG = useMediaQuery(theme.breakpoints.down('lg')); const { drawerOpen } = useSelector((state) => state.menu); const drawerContent = useMemo(() => , []); const drawerHeader = useMemo(() => , [drawerOpen]); return ( {!downLG ? ( {drawerHeader} {drawerContent} ) : ( dispatch(openDrawer((prev) => !prev))} ModalProps={{ keepMounted: true }} sx={{ display: { xs: 'block', lg: 'none' }, zIndex: 1201, '& .MuiDrawer-paper': { boxSizing: 'border-box', width: DRAWER_WIDTH, borderRight: `1px solid ${theme.palette.divider}`, backgroundImage: 'none', boxShadow: 'inherit' } }} > {drawerHeader} {drawerContent} )} ); }; MainDrawer.propTypes = { open: PropTypes.bool, window: PropTypes.object, handleDrawerToggle: PropTypes.func }; export default MainDrawer;다른 컴포넌트에서 아래와 같이 openDrawer로 drawerOpen의 상태 값을 변경하고 있긴합니다.const downXL = useMediaQuery(theme.breakpoints.down('xl')); useEffect(() => { dispatch(openDrawer(!downXL)); }, [])사용자가 브라우저의 테두리를 드래그하여 사이즈를 천천히 줄일 때, 혹은 탭 부분을 더블 클릭하여 사이즈를 줄이는 경우는 drawer가 의도대로 문제없이 잘 동작합니다. 문제는 개발자 도구를 키거나, 윈도우 창 줄이기 버튼, 키보드로 창 정렬하는 것처럼 창이 갑자기 줄어드는 경우 다른 요소들이 클릭되지 않는 문제가 발생합니다.창을 서서히 줄이면 개발자도구에서 해당 요소를 찍어보면 클래스 명이 다음과 같습니다.class="MuiDrawer-root MuiDrawer-modal MuiModal-root MuiModal-hidden css-txjfiv-MuiModal-root-MuiDrawer-root"창을 갑자기 줄이면 개발자도구에서 해당 요소를 찍어보면 클래스 명이 다음과 같습니다.class="MuiDrawer-root MuiDrawer-modal MuiModal-root css-1bsc7sj-MuiModal-root-MuiDrawer-root"차이점은 MuiModal-hidden이라는 것을 발견했고 해당 클래스명이 요소를 hidden하고 있음을 알아냈습니다. 따라서 hidden이 아닐 때 클라이언트에서 보이지 않는 요소가 제일 상단에 있기에 페이지에서 어떤 내용들을 클릭할 수 없음을 파악했습니다.hidden이 되고 안되고의 차이는 무엇일까.. 고민하다가 의 drawerOpen 상태값이 문제인가?로 옮겨졌습니다. open의 값에 falsy값을 박아넣으니 해당 요소가 MuiModal-hidden이 추가되며, 브라우저상 다른 요소가 클릭이 가능해졌습니다.이 drawerOpen의 상태가 false면 문제없이 돌아가겠구나 라고 생각하여, drawerOpen의 값을 콘솔에도 찍어보고 개발자도의 redux state를 확인해봐도 해당 값은 false로 나오는데, 왜 해당 값을 넣으면 hidden처리 되지 않는지 의문입니다.매번 눈팅하다가 처음 질문해보는데, 가벼운 의견이라도 나누어주시면 감사하겠습니다 :)

프론트엔드 MUI5 라이브러리의 Drawer 컴포넌트 질문

0개의 답변

Q&A 목록