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