[React] 모달창 띄운 상태에서 스크롤 막는 코드 예시

// Layout.js
const [isModalShow, setIsModalShow] = useState(false)

useEffect(() => {
    // toggle(token: string, force?: boolean): boolean;
    // 모달창 Show 상태일 때(isModalShow = true) => body의 클래스명에 "unscrollable" 추가
    document.body.classList.toggle("unscrollable", isModalShow)
}, [isModalShow])

/* index.css */
body {
	width: var(--app-width);
	margin: 0 auto;
}

.unscrollable {
	overflow: hidden;
}

 

 

---

참고 사이트

• https://stackoverflow.com/questions/47706903/add-a-class-to-the-html-body-tag-with-react