React | 모달창 스크롤 방지, 닫기 버튼 클릭 시에만 닫기

HN·2023년 1월 15일
0
post-custom-banner

공부용 개인 프로젝트 작업 중 만들어본 모달


스크롤 방지

useState로 모달 state를 생성해주고 기본 값은 false로 준 다음,state 값을 변경할 수 있는 함수를 만들어준다.
modal값이 false일 때(보여지지 않을 때)는 state 값을 true로, overflow는 hidden으로 줘서 스크롤이 움직이지 않게 해준다. 반대로 modal값이 true일 때(보여질 때)는 값을 false로 변경해주고, body의 overflow를 unset으로 줘서 hidden을 풀어준다.


App.jsx

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 이벤트로 닫힐 수 있게 설정해주면 끝!


Modal.jsx

return (
	<div onClick={(e) => {e.stopPropagation()}}>
		<button onClick={handleModal}>X</button>
	.
	.
	.
	</div>
);
post-custom-banner

0개의 댓글