리액트 모달 종료시 모달페이지 재렌더링 되는 현상

Question

안녕하세요 최근에 리액트 개인적으로 공부하고 레이아웃 잡아가는 중인데모달이나 레이어 팝업을 호출할 때 샘플을 가지고 공부하고 있는데요모달 호출할때 렌더링이 되는건 이해하겠는데모달이 종료될때도 prop 상태가 false로 바뀌니 재렌더링이 되는것 같더라구요물론 모달창이 종료는 되지만 재렌더링 되는 과정에서 onload시 찍어놓은 console 로그가 찍혀버리니 나중에 개발할 때 문제가 생길거 같아고칠 수 있는 방법이 있는지 조언 좀 구하고 싶습니다.//----------------------------------------------------- // _app.js 페이지 //----------------------------------------------------- export default function App ({ Component, pageProps, match }) { console.log("onload App"); // 화면의 기본적인 레이아웃 처리 return ( ) }//----------------------------------------------------- // 공통 Contents 영역 페이지 //----------------------------------------------------- export default function Contents({ children, pageProps }) { console.log("onload Contents"); const common = Common(); // 뒤로가기 호출시 처리 useEffect(() => { window.addEventListener('popstate', ()=>{common.goBack()}); return () => { window.removeEventListener('popstate', ()=>{common.goBack()}); } },[]); // 페이지 mounted 시 호출됨 useEffect(() => { let currnetPath = location.pathname; console.log("currnetPath :: " + common.getSvcId()) // 화면이 로드되는 시점에 pushState를 하여 브라우저 히스토리 생성 history.pushState(null, '타이틀', currnetPath); return() => { console.log("unmounted path :: " + currnetPath); } }); return ( <>

{children} ) }//----------------------------------------------------- // 공통스크립트 Common //----------------------------------------------------- const Common = () => { /** * 모달창 열기 * @constructor */ const setModal = useSetRecoilState(modalState); const openModal = () => { console.log("openModal") setModal(true); } /** * 모달창 닫기 * @constructor */ const closeModal = () => { console.log("closeModal") setModal(false); } return { openModal, closeModal }; } export default Common;//----------------------------------------------------- // 모달창을 호출하는 페이지 //----------------------------------------------------- export default function Index(props, ref) { console.log("onload index"); const common= Common(); return ( <> { common.openModal(true) }}>openModal ); }//----------------------------------------------------- // 공통 모달컴퍼넌트 //----------------------------------------------------- export default React.memo(function Modal(props, ref) { // 이부분이 종료시에도 재 호출됨 console.log("Modal Common") const modal = useRecoilValue(modalState); const common = Common(); const handleClose = () => { common.closeModal(); }; return ( <> ) })

리액트 모달 종료시 모달페이지 재렌더링 되는 현상

0개의 답변

#modal 목록