모달을 띄웠을 땐 메인 페이지 body의 스크롤은 막아놓기

useEffect란?

컴포넌트의 최상위 레벨에서 useEffect를 호출하여 Effect를 선언한다.

 

`useEffect(setup, dependencies?)`

React로 제어되지 않는 외부 시스템과 동기화를 유지할 수 있다.

• 첫번째 인자: setup함수는 선택적으로 클린업 함수를 반환할 수도 있다. React는 컴포넌트가 DOM에 추가되면 셋업 합수를 실행한다. 다시 렌더링할 때마다 (클린업 함수가 있는 경우) 먼저 이전 값으로 클린업 함수를 실행한 다음, 새 값으로 setup함수를 실행한다. 컴포넌트가 DOM에서 제거되면, React는 마지막으로 클린업 함수를 실행한다.
• 두번째 인자: 옵션, 의존성 배열이 들어간다. 의존성을 전혀 지정하지 않으면 컴포넌트를 다시 렌더링할 때마다 Effect가 다시 실행된다.
• undefined를 반환한다.

setup 코드는

`const $body = document.querySelector("body"); $body.style.overflow = "hidden";`

cleanup 코드는

`return () => ($body.style.overflow = "auto");`

 

css overflow 속성으로 모달이 나오면 setup코드에서 body가 안움직이도록 하고, 제거되면 cleanup 코드에서 body가 다시 나오도록 했다.

 

src/components/Modal/index.jsx

import { useEffect } from "react";
import { useRef } from "react";
import styled from "styled-components";
import useOutsideClick from "hooks/useOutSideClick";
import ModalContainer from "./ModalContainer";

function Modal({ onClose, children }) {
  const modalRef = useRef(null);

  const handleClose = () => {
    onClose?.();
  };

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

  return (
    <ModalContainer>
      ...
    </ModalContainer>
  );
}

export default Modal;