리액트 : Modal 모달 팝업 외부 영역 클릭시 닫기 기능 + 배경 스크롤 막기

import React, {useEffect} from 'react';

import styled from 'styled-components';

import WriteNewFix from './WriteNewFix';

import {useDispatch, useSelector} from 'react-redux';

import {showPublicModal} from '../../redux/modules/publicModalSlice';

import PublicModal from './PublicModal';

function Modal() {

  const publicModal = useSelector(state => state.publicModal);

  const dispatch = useDispatch();

  const closeModalOutside = event => {

    if (event.target === event.currentTarget) {

      openPublicModal();

    }

  };

  const openPublicModal = () => {

    dispatch(

      showPublicModal({

        isUse: true,

        title: '😯 정말 나가시겠어요?',

        message: '저장하지 않은 내용은 사라져요.',

        btnMsg: '계속 작성',

        btnType: 'continue',

        btnMsg2: '나가기',

        btnType2: 'exit',

      }),

    );

  };

  // 모달이 열릴 때 배경 스크롤을 막는 부분

  useEffect(() => {

    if (publicModal.isUse) {

      //메인모달용

      document.body.style.overflow = 'hidden';

    } else {

      //공용모달용

      document.body.style.overflow = 'hidden';

    }

    return () => {

      // 모달이 닫힐 때 배경 스크롤을 다시 허용하는 부분

      document.body.style.overflow = 'unset';

    };

  }, [publicModal.isUse]);

  return (

    <div>

      {publicModal.isUse && <PublicModal />}

      <ScDiv

        onClick={event => {

          closeModalOutside(event);

        }}

      >

        <ScDivContainer>

          <WriteNewFix />

        </ScDivContainer>

      </ScDiv>

    </div>

  );

}

export default Modal;

 

 

1. 모달 팝업 외부 영역 클릭시 닫기 기능

1) 모달의 부모 태그에 이벤트 사용해서 부모 태그가 클릭시 팝업 닫기

2) ScDiv (부모태그) 안에 ScDivContainer & WriteNewFix(모달 내용)

3) ScDiv (부모태그) --> onClick 이벤트에서 event.target과 event.currentTarget 사용해서 해결

 

2. 모달 팝업 외부 영역 배경 스크롤 막기

1) document.body.style.overflow = 'hidden'; &  'unset'; 으로 필요 구간 스크롤 넣고 빼기

 

 

 

끝.