react에서 react-modal라이브러리로 contextAPI를 사용하여 modal구현 중 어려운 부분이 있습니다!

Question

안녕하세요 react를 공부중인 학생입니다! modal의 기능을 구현하고 싶어 자료를 찾아보던 중 react-modal라이브러리를 contextAPI를 사용하여 효율적으로 작성하는 글을 보게 되어 따라서 실습을 하다 막히게 되어 질문 글을 올리게 되었습니다. https://nakta.dev/how-to-manage-modals-1위 링크의 &#34;효율적인 모달관리 구현해보자&#34; 부분부터 진행하여 마지막까지 잘 따라 하였습니다.그 뒤 다음 단계인 아래 링크를 따라하던 중 바로 처음에서 막히게 되었습니다.https://nakta.dev/how-to-manage-modals-2저는 모달열기 버튼을 눌러도 모달이 생성되지 않았습니다.Modals.js를 어느 곳에서도 호출하지 않는데 어떻게 modal창이 생성되는지 이해가 잘 가지 않고, 저는 왜 modal창이 생성되지 않는지모르겠습니다. 완벽한 답안이 아닌 어떠한 의견도 감사하게 받아 읽고 생각해보겠습니다. 많은 도움 부탁드립니다!

EmDev · Accepted Answer

import { StrictMode } from 'react'; import ReactDOM from 'react-dom'; import ReactModal from 'react-modal'; import App from './App'; import ModalsProvider from './ModalsProvider'; import Modals from './Modals'; ReactModal.setAppElement('#root'); const rootElement = document.getElementById('root'); ReactDOM.render( , rootElement, );저는 index.jsx에서 ModalsProvider로 감싸주는 부분에 Modals를 추가해주었습니다.

EmDev · Answer

블로그 아래 부분의 내용을 보니 Modals.js를 호출하고 있는데요??import useModals from './useModals'; import { modals } from './Modals'; ​const App &#61; () &#61;> { const { openModal } &#61; useModals(); ​ const handleClick &#61; () &#61;> { openModal(modals.myModal, { onSubmit: () &#61;> { console.log('비지니스 로직 처리...'); }, }); }; ​ return (...); }

fullgon · Answer

문제를 해결해주시기 위해 찾아보고 답변 달아주셔서 감사합니다! 올려주신 코드 부분을 보고 끝까지 실습 해보았습니다.올려주신 코드 부분에서 Modals.js를 import하지만 Modals.js 안의 Modals를 호출하는 것이 아닌 MyModal 컴포넌트를 갖고 있는 modals를 호출하여 사용하는 것이어서 Modals.js의 Modals컴포넌트는 따로 호출이 되지 않습니다.그래서 끝까지 코딩해 보았는데도 버튼을 눌러도 모달창이 활성화되지는 않고 있습니다..ㅠㅠ

EmDev · Answer

깜박 잊고있었는데 그러고 보니 저도 이 블로그 참조해서 모달 컨트롤 적용했었네요;;좀 오래되긴 했는데 말씀하신대로 블로그에 있는대로만 하면 안될겁니다.그래서 저도 왜 안되는지 이유를 곰곰히 생각해보고블로그에 없는 내용을 추가해서 지금은 잘 동작하고 있네요.왜 안되는지 한 번 더 자세히 검토해보세요.그래도 아 정말 모르겠다 싶으시면 제가 적용한 레퍼런스 코드를 보여드릴께요.

fullgon · Answer

같은 블로그를 참조하여 예제를 해봤다고 하시니 뭔가 가깝게 느껴지네요 ㅎㅎ..저는 그래서 지금 모달열기 버튼이 있는 곳에서 Modals.js를 import 후 <Modals/>을 한 줄 추가하여 사용하니 작동하고 있습니다. 혹시 다른 방법으로 적용하셨다면 알 수 있을까요?

fullgon · Answer

최상위에서 감싸주면서 모든 하위 컴포넌트에서 사용할 수 있도록 하신 것 같네요! 코딩에 정답은 없지만 잘 정리된 블로그에서 결과가 안나오니 제 방법에 자신이 없었는데 EmDev님 덕분에 자신감도 얻고 최상위에 <Modas/>를 추가하는 방법도 알게되었습니다. 감사합니다!

react에서 react-modal라이브러리로 contextAPI를 사용하여 modal구현 중 어려운 부분이 있습니다!

6개의 답변

#react-modal 목록