인프런 커뮤니티 질문&답변

전역 모달을 2개 쓰고 싶어서 일단 스토어 2개를 만들었는데요. 모달 프로바이더도 2개를 만들어야하는지, 아니면 하나의 모달 프로바이더에 2개 모달을 모두 넣어도 되는지 궁금합니다. 그리고 만약 하나의 모달 프로바이더에 두 모달을 넣는다면 어떻게 코드를 작성해야 하는지 궁금합니다.

// 1번
export default function ModalProvider({ children }: { children: ReactNode }) {
  return (
    <>
      {createPortal(
        <>
          <AModal />
          <BModal />
        </>,
        document.getElementById("modal-root")!,
      )}
      {children}
    </>
  );
}

// 2번
export default function ModalProvider({ children }: { children: ReactNode }) {
  return (
    <>
      {createPortal(<AModal />, document.getElementById("modal-root")!)}
      {createPortal(<BModal />, document.getElementById("modal-root")!)}
      {children}
    </>
  );
}