[CSS] 모달 열릴 때 뒷 배경 스크롤 방지

useEffect(() => {

if (isOpenModal) {

document.body.style.overflow = "hidden";

} else {

document.body.style.overflow = "auto";

}

}, [isOpenModal]);

 

React는 상관 없지만, Nest.js 환경에서는 SSR이 있기 때문에 document나 window가 서버에 존재하지 않아서 렌더링 시점만 조심하면 된다.

-> 위 코드로 써도 상관은 없다고 한다. useEffect는 브라우저에서만 실행되기 때문에 서버사이드에서 document를 참조하는 일은 없기 때문.

 

그래도 타입 안정성을 위해서 typeof document !== "undefined"를 추가해도 된다.

useEffect(() => {

if (typeof document !== "undefined") {

document.body.style.overflow = isOpenModal ? "hidden" : "auto";

}

}, [isOpenModal]);