[React] Modal창 띄워졌을 때 body 스크롤 안되게 하기

modal이 떠 있을 때 스크롤에 대한 설정을 따로 하지 않으면 뒷쪽 화면이 움직일 수 있다.

 

뒷면이 움직이지 않도록 모달이 떠 있을 땐 스크롤을 금지하고, 모달이 사라지면 가능하도록 설정해주어야 한다.

 

 

---

 

 

eventListener를 사용하는 방법

 

화면을 움직이는 이벤트에 대해 모두 반응하지 않게 설정한다.

function Modal(props) {
  useEffect(() => {
    // modal이 떠 있을 땐 스크롤 막음
    disableScroll();
    // modal 닫히면 다시 스크롤 가능하도록 함
    return () => enableScroll();
  }, []);
 
  // 생략
}
export default Modal;

 

useEffect를 사용해 component가 생성될 때 disableScroll이 실행되고, component가 제거될 때 enableScroll이 실행되도록 설정한다.