[React] Modal 팝업시 뒷배경이 스크롤 되지 않게 하는 방법

Intro 

리액트에서 Modal 팝업시 뒷배경이 스크롤 되지 않게 하는 방법에 대해 소개하고자 합니다. 

 

How to do 

import React, { useEffect } from 'react';
export const Modal = (props) => {
  // 모달 오버레이에서 스크롤 방지
  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);
    };
  }, []);
  ...
};

useEffect를 사용하여 Modal 팝업된 상태라면 다음의 CSS를 적용시키고, 그게 아니라면 CSS를 reset 시키면 됩니다. 

 

Reference

http://yoonbumtae.com/?p=3776