리액트 모달 띄웠을시 바깥 스크롤 막기

  // 모달 오버레이에서 스크롤 방지
  useEffect(() => {
    document.body.style.cssText = `
      position: fixed; 
      top: -${window.scrollY}px;
      overflow-y: scroll;
      width: 100%;`
    return () => {
      const scrollY = document.body.style.top
      document.body.style.cssText = ""
      window.scrollTo(0, parseInt(scrollY || "0", 10) * -1)
    }
  }, [])

Modal 컴포넌트에 넣어주면 됨

 

원리는 모달이 띄워졌을 시 position fixed 와 overflow-y가 핵심