body 스크롤 확실하게 막기

문제 상황

navbar의 사이드 메뉴가 펼쳐졌을 때 body의 스크롤을 막아야 했습니다.

해결 방법

 useEffect(() => {
    if (mobileMenuCollapsed) {
      document.body.style.overflow = 'hidden'
      document.body.style.width = '100%'
      document.body.style.height = '100%'
    } else {
      document.body.style.overflow = 'auto'
      document.body.style.width = ''
      document.body.style.height = ''
    }
    return () => {
      document.body.style.overflow = 'auto'
    }
  }, [mobileMenuCollapsed])

여기서 포인트는 body의 width, height를 100%로 설정하는 것입니다.
그렇지 않으면 높은 확률로 스크롤이 움직이게 됩니다.