[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]);