모달 컴포넌트 내에 추가해 주면 스크롤 방지 document.body.style.overflow = "hidden"; 모달 닫을 때 쓰는 handle 함수에 추가해 주면 스크롤 방지 해제 document.body.style.overflow = "unset"; 참고: https://velog.io/@potter/리액트-모달창-작동시-스크롤-방지 React 모달 스크롤 막기 / CSS scroll lock / 리액트 모달 스크롤 막기 / React 모달창 스크롤 막기 / 모달창 스크롤 막기 / 모달 스크롤 막기 / 리액트 모달창 스크롤 막기

언젠가 모달창을 쓸 일이 있었는데, 그냥 구글링 한 코드 그대로 복붙해서 갖다 썼던 기억이 있다. 이번에는 디자인도 제대로 입혀서 쓰고 싶어서 더 많이 찾아봤는데 대부분 라이브러리를 많이 이용하는 것 같았다. 나는 내가 맡은 구역 이외에도 다른 팀원이 가져다 쓸 수 있도록 템플릿 같은 개념의 ModalFrame을 만들어 놓고 추가적인 속성이나 안에 들어가는 컴포넌트들은 ModalFrame의 children으로 구성하도록 하고 싶었다. 또, 모달 배경을 블러 처리 해야 했고 그 배경을 눌렀을 때 모달이 닫히게 만들고 싶었기 때문에 열심히 찾아보고 만들어보고 하던 중 딱 맞는 블로그 발견. 이 분 블로그를 보고 참고해서 만들었다. _handleModal로 모달이 open/close 되는 토글 함수를 전달해 ..