전역 modal 동적으로 받아오기

현재 우리는 이렇게 루트레이아웃에 modal을 넣어서 최상단에 올릴 수 있게 하고 사용중인데, 이 경우 초기 번들링 크기가 클 수 있다는 의견이 있었다!

export default function ModalArea() {
  const { 생략 } = useModalStore((state) => state);

  return (
    <>
      {isTodoCreateModalOpen && <TodoCreateModal />}
      {isTodoCreateCheckModalOpen && <TodoCreateCheckModal />}
    </>
  );
}

이것을 개선하기 위한 방법을 찾아봤을 때, 모듈 또한 next/image처럼 dynamic으로 사용할 때만 받아올 수 있다고! 😳
-> 즉, 해당 모듈이 필요할 때만 가져와 초기 번들링에 포함되지 않는다!

// 동적으로 모달 로드
const TodoCreateModal = dynamic(() => import('@/modals/todoCreateModal'));
const TodoCreateCheckModal = dynamic(() => import('@/modals/todoCreateCheckModal'));

export default function ModalArea() {
  const { 생략 } = useModalStore((state) => state);

  return (
    <>
      {isTodoCreateModalOpen && <TodoCreateModal />}
      {isTodoCreateCheckModalOpen && <TodoCreateCheckModal />}
    </>
  );
}

zustand를 클라이언트 측에서만 동적으로 가져오기

스토어가 늘어날수록 보일러플레이트가 증가함 vs 스토어가 늘어나더라도 가독성을 챙기는 것이 좋음
-> 이것에 대해 또 고민하던 중, zustand 또한 dynamic으로 가져와 초기 번들링을 줄일 수 있다고 😳😳..
-> store를 사용하는 클라이언트 사이드에서만 가져온다!

  
  //이렇게 생긴 것을
export default function DoneChecker() {
  const { todoCreateModal } = useModalStore((state) => state);
  ...
}
  
  
// 이렇게 추가해주면 된다.
const useModalStore = dynamic(() => 
   import('@/provider/store-provider').then((mod) => mod.useModalStore), { ssr: false });
  
export default function DoneChecker() {
  const { todoCreateModal } = useModalStore((state) => state);
 ...
}