modal 화면 외부 스크롤 막기

모달창을 띄울 때 모달 뒤 외부 화면의 스크롤을 막는 코드

useEffect(() => {
 document.body.style= `overflow: hidden`;
 return () => document.body.style = `overflow: auto`
}, [])

타입스크립트 환경에서 개발해서 그런지 다음과 같은 에러가 나왔다.

TS 2540: Cannot assign to style because it is a read-only property

타입스크립트에는 element에 스타일 속성이 존재하지 않아서 그렇다고 한다.

setAttribute를 이용해 아래처럼 수정해주니 해결

useEffect(() => {
   document.body.setAttribute("style", "overflow: hidden");
   return () => document.body.setAttribute("style", "overflow: auto");
 }, []);