리액트 모달 팝업
본문
리액트 독학 하다보니 계속 막히네요..
구글링 통해서 모달 팝업 열고 닫는 기본적인 소스 대입을 해보고 조금 이해는 했는데
의문점은 현재 여는 버튼 하고 모달하고 같은 페이지 즉 테스트중인 app.jsx 안에서만 되고 있어서..
제가 구현 하고 싶은건 여러개의 모달은 modal.jsx 에 모아놓으면 되는건 알겠는데
모달 여는 버튼은 어디에 어느 서브페이지에 있을지 모르는데 거기서 클릭했을 때 modal.jsx 를 타고 가서
해당 모달을 열어야 될거 같은데 다른 페이지에서 여는 버튼을 동작시키니 작동을 안해서
먼가 또 부가적인 작업이 필요한거 같은데 설명 조금 부탁드립니다.
답변 2
언급하신데로 같은 페이지 내에서는 유지 이펙트로 버튼 제어 하면 그렇게 어렵지 않게 구현이 가능할 것입니다.
이제 다른 컴포넌트를 통해 이를 구현하려면 props 에 대한 이해가 필요합니다.
어려운 용어를 쉽게 풀이하면 부모가 가진 데이터를 자식에게 공유 해주는 것입니다.
질문 기준으로, 모달창을 열지 말지의 기준을 자식 컴포넌트 (모달)에게 넘겨주는 것이라 보시면 됩니다.
아래 코드 잠시 볼까요 ?
function App() {
const [isOpen, setIsOpen] = useState(false);
const handleModal = () => {
setIsOpen(!isOpen);
};
return (
<>
<button onClick={handleModal}>Open Modal</button>
<Modal isOpen={isOpen} onClose={handleModal}>
<h1>Modal Title</h1>
<p>Modal Content</p>
</Modal>
</>
);
}
코드 보시면 눈여겨 보셔야 하는게 <Modal isOpen={isOpen} onClose={handleModal}> 이부분입니다.
퍼블리셔니깐 이해쉽게 html 태그에 속성을 추가 해준다?라는 느낌으로 접근하면 됩니다.
작명=값 형태로 이루어져 있습니다.
is는 보통 상태 작명을 하는 경우가 많아 구글 검색 결과에서도 isOpen 혹은 isModal 이라고 많이 쓸꺼에요
이렇게 되면 모달 컴포넌트 자체에서 이제 isOpen 과 onClose 를 사용할 수 있습니다.
물론 children 컨텐츠두요
다음 코드 볼까요?
const Modal = (props) => {
if (!props.isOpen) return null;
return (
<ModalOverlay onClick={props.onClose}>
<ModalContent onClick={(e) => e.stopPropagation()}>
{props.children}
</ModalContent>
</ModalOverlay>
);
};
이렇게 props라는 인자 값으로 사용 가능합니다.
props.isOpen / props.onClose 를 사용할 수 있게 됩니다.
그럼 modal 컴포넌트 에서 액션은 다시 부모 컴포넌트에 전해져 동작하는 원리라 보시면 됩니다.
스크립트에 조금 익숙해지시면 구조 분해 할당이란 것도 배우게 되는데 그땐 좀 더 쉽게 접근이 가능합니다.
const Modal = ({ isOpen, onClose, children }) => {
if (!isOpen) return null;
return (
<ModalOverlay onClick={onClose}>
<ModalContent onClick={(e) => e.stopPropagation()}>
{children}
</ModalContent>
</ModalOverlay>
);
};
props를 받아올 때 구조 분해를 해버려서 그냥 일반 변수 처럼 {isOpen} 으로 사용 가능합니다.
props를 좀 더 이해하시면, 상태 관리에 대해서 접근이 쉬운데요
전역 상태 관리인 리덕스/툴킷도 props에 대한 이해가 있을 때 배우시는게 좋습니다.
너무 의존하지 마시라는 의미이기도 하구요
실제 대기업 프로젝트 때 전역 상태 관리 프로그램 사용 금지여서 props 천국이였던 하하하
쨋든 props 천국을 약간 빗대어 만든 쇼츠가 있어 소개 합니다.
https://youtube.com/shorts/u86KSUc9Ngg?si=cqyP1R7CZCHCCFSN
화이팅 하세요^0^)/.
아이고 구글링에선 이해가 잘안됐는데 풀어서 설명해주시니 이해가 팍팍 되네요!
감사합니다. 이제 모달 응용 연습 좀 해봐야겠습니다.
