[React]Modal 팝업시 뒷배경 스크롤 되지 않게 하기

[react]Modal 팝업시 뒷배경 스크롤 되지 않게 하기

Modal components를 만들었는데, 모달 css position 속성인 `fixed`를 적용해도 뒷 배경이 스크롤이 되는 문제를 겪었다. 그래서 이를 해결하기 위해 구글링을 했다.

 

  // 모달 오버레이에서 스크롤 방지
  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);
    };
  }, []);

이때 react hook 중 하나인 useEffect를 통해 이를 해결하는 방법이다.

`body`태그의 css를 변경해 position을 fixed로 하고, top의 위치를 현재 스크롤 위치로 설정해 `overflow-y:scroll,width:100%`를 통해 스크롤 방지가 되는 코드이다.

하지만 내 코드에서는 modal창이 뜨지 않은 상태에서도 fixed가 되어버리는 현상을 겪었다.

//달성률과 나의 인증샷 보여주는 탭
function Achievement() {
  const [Modal, setModal] = useState(false)
  useEffect(() => {
    if (Modal === false) {
      console.log('bye', Modal)
    } else {
      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);
        console.log('hi', Modal)
      };
    }
  }, [Modal]);

  return (
    <>
        <CertifyGoBtn hColor={'#65ACE2'} dColor={'#98C064'} onClick={() => setModal(true)}>인증하기</CertifyGoBtn>
        <MissionModal show={Modal} setShow={setModal} />

    </>
  )
}

나는 `인증하기` 버튼을 클릭 시 useState를 통해 Modal이라는 값을 바꾸어 주었다. useEffect가 Modal이라는 값을 추적할 수 있게` [Modal]`을 적용했다. 따라서 useEffectModal의 값이 true일 때만 스크롤이 멈추게 했다.

참고한 site

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

https://cocoon1787.tistory.com/796

https://velog.io/@do_dadu/React%EC%97%90%EC%84%9C-Modal-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0feat.-createPortal-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EB%A7%89%EA%B8%B0