모달창 외부스크롤 방지 - react.js

모달창을 열었을 때 모달 바깥 화면을 드래그할 경우 외부 스크롤이 되어

사용자에게 깔끔하지 못한 사용감을 줄 수 있다.

document.body 객체를 이용하여 모달창을 열었을 땐 scroll을 없애고, 닫았을 때 다시 scrollbar를 생성시킨다.

 

onModalOpen은 모달창을 켰을때 이벤트 함수이며, 

onModalClose는 끌때의 이벤트 함수이다.

 

중복모달을 사용할 경우에는 조금 꼬일 수 있기때문에 고려해서 사용해야 한다.

const [modalOpen, setModalOpen] useState(false);

const  onModalOpen  =  useCallback(()  =>  {
document.body.style.overflow =  "hidden";
setModalOpen(true);  }, [])

const  onModalClose  =  useCallback(()  =>  {
document.body.style.overflow =  "unset";
setModalOpen(false);  }, [])