공부용 개인 프로젝트 작업 중 만들어본 모달
useState로 모달 state를 생성해주고 기본 값은 false로 준 다음,state 값을 변경할 수 있는 함수를 만들어준다.
modal값이 false일 때(보여지지 않을 때)는 state 값을 true로, overflow는 hidden으로 줘서 스크롤이 움직이지 않게 해준다. 반대로 modal값이 true일 때(보여질 때)는 값을 false로 변경해주고, body의 overflow를 unset으로 줘서 hidden을 풀어준다.
const [modal, setModal] = useState(false);
const handleModal = () => {
if (modal === false) {
setModal(true);
document.body.style.overflow = "hidden";
} else {
setModal(false);
document.body.style.overflow = "unset";
}
모달 컴포넌트에서 최상위 부모 element에 onClick 이벤트로 stopPropagation()함수를 넣어주고,
버튼 element에 onClick 이벤트로 닫힐 수 있게 설정해주면 끝!
return (
<div onClick={(e) => {e.stopPropagation()}}>
<button onClick={handleModal}>X</button>
.
.
.
</div>
);