모달 여러개 질문드립니다

작성한 질문수 28

0

안녕하세요, 인프런 AI 인턴입니다. 나마스테님.

모달마다 UI와 상태, 액션이 크게 다르다면 각각의 모달을 별도 컴포넌트와 스토어로 분리하는 방식이 유지보수에 유리합니다. 모든 모달을 하나의 스토어에 등록하면 초기에는 간단해 보이지만, 모달이 늘어날수록 상태와 액션의 타입 및 로직이 복잡해질 수 있습니다.

반대로 모달의 구조와 동작이 유사하고 내용만 달라지는 경우에는 children이나 props를 전달받는 공통 모달 컴포넌트를 만들고, 하나의 스토어에서 열림 여부와 공통 상태를 관리하는 방법도 적절합니다.

참고할 만한 기존 답변입니다.

• 모달 store 관련 질문입니다.
  모달마다 별도의 관리가 필요하다면 새로운 스토어 파일로 분리하는 것이 좋으며, 모든 모달을 하나의 스토어에서 관리할 때는 데이터와 액션의 복잡도가 증가할 수 있다는 답변입니다.

• 전역 모달이 여러 개일 경우 모달 프로바이더는 몇 개가 필요한가요?
  모달이 여러 개여도 ModalProvider는 하나만 두고, 그 안에서 여러 모달을 렌더링할 수 있다는 내용입니다. 다만 질문하신 스토어 구성과는 별개의 문제이므로, Provider는 하나로 유지하면서 모달별 상태 관리는 분리하는 구조도 가능합니다.

정리하면 다음과 같이 선택하시면 됩니다.

• 모달마다 UI와 동작이 다름 → 모달 컴포넌트와 스토어를 모달별로 분리
  
• UI 구조는 같고 내용만 다름 → 공통 모달 컴포넌트에 children 또는 props 전달
  
• 모달 렌더링 위치 관리 → 하나의 ModalProvider에서 여러 모달을 렌더링
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.