prevent scroll event with MODAL (스크롤 방지-모달창)

왜 가? 프로젝트에 적었던 스크롤링 방지에 대해 여러 검색과 지인에게 물어본 결과.. 좀 더 효율적이고 지저분하지 않은 코드를 알아냈다.

 

모달창을 띄웠을 때, 스크롤 방지를 하고 -> 모달창을 닫으면 다시 스크롤 활성화를 시키려면

overflow:hidden 속성을 이용하면 된다!

 

• modal창의 상태를 useState로 상태값을 지켜보고
• 모달창이 뜨면, scroll 상태를 hidden으로 비활성화시키고
• 모달창을 닫으면, hidden을 다시 풀어주는 unset속성을 줘서 스크롤을 다시 활성화시킨다.

const [modal, setModal] = useState(false);

const handleModal = () => {
	if (modal === false) {
		setModal(true);
		document.body.style.overflow = "hidden";
	} else {
		setModal(false);
		document.body.style.overflow = "unset";
}