모달창을 열었을 때 모달 바깥 화면을 드래그할 경우 외부 스크롤이 되어 사용자에게 깔끔하지 못한 사용감을 줄 수 있다. document.body 객체를 이용하여 모달창을 열었을 땐 scroll을 없애고, 닫았을 때 다시 scrollbar를 생성시킨다. onModalOpen은 모달창을 켰을때 이벤트 함수이며, onModalClose는 끌때의 이벤트 함수이다. 중복모달을 사용할 경우에는 조금 꼬일 수 있기때문에 고려해서 사용해야 한다. const [modalOpen, setModalOpen] useState(false); const onModalOpen = useCallback(() => { document.body.style.overflow = "hidden"; setModalOpen(true); }, [..

CODING/React.js 2022. 12. 22. 15:59